Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. Shop / WooCommerce
  3. product customization

product customization

Scheduled Pinned Locked Moved Shop / WooCommerce
2 Posts 2 Posters 81 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • B Offline
    B Offline
    Bella
    wrote on Feb 2, 2022, 10:03 PM last edited by
    #1

    Hello Richard,
    I am wondering a few things, see this test product for example:
    https://rosereichart.com/product/test/

    1. how can I change the color of the line around the quantity in the single product?
    2. how can I change the order of the shown information? For example how would I put the price and the button below the product description?
      Thank you
    1 Reply Last reply
    0
    • R Offline
      R Offline
      Richard
      Global Moderator
      wrote on Feb 7, 2022, 11:05 PM last edited by
      #2

      Dear @Bella

      Best wishes & hope you are well ✨
      1. how can I change the color of the line around the quantity in the single product?

      It's actually three boxes with borders so the following code relates to all, let me know if it works for you
      (w e may need to specify the input-text with an ID if it affects other input-texts):

      .lay-woocommerce-qty-wrap *, .input-text {
          border-color:red !important;
      }
      

      Result:
      Screen Shot 2022-02-08 at 11.42.01 AM.png


      1. how can I change the order of the shown information? For example how would I put the price and the button below the product description?

      The following Code:

      <script>
      window.laytheme.on("newpageshown", function(){
      
      jQuery( ".cart" ).insertAfter( jQuery( ".lay-woocommerce-product-tab" ) );
      
      });
      </script>
      

      Gives the result:
      Screen Shot 2022-02-08 at 11.53.09 AM.png

      This is added into Custom <head> Content in Lay Options > Custom CSS & HTML >

      https://laytheme.com/documentation/custom-javascript.html

      We also need a little space between the Quantity and Description now that they have been switched:

      .woocommerce div.product form.cart {
          margin-top: 50px;
      }
      

      Hope this helps Bella! 🏖
      Richard
      1 Reply Last reply
      0
      Reply
      • Reply as topic
      Log in to reply
      • Oldest to Newest
      • Newest to Oldest
      • Most Votes

      1/2

      Feb 2, 2022, 10:03 PM


      I also code custom websites or custom Lay features.
      💿 Email me here: 💿
      info@laytheme.com

      Before you post:
      1. When using a WordPress Cache plugin, disable it or clear your cache.
      2. Update Lay Theme and all Lay Theme Addons
      3. Disable all Plugins
      4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

      This often solves issues you might run into

      When you post:
      1. Post a link to where the problem is
      2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
      3. If the problem is difficult to explain, post screenshots / link to a video to explain it
      Online Users
      Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
      laytheme.com
      • Login

      • Don't have an account? Register

      • Login or register to search.
      1 out of 2
      • First post
        1/2
        Last post
      0
      • Recent
      • Tags
      • Popular
      • Users
      • Search