Home Forums WoodMart – Premium Template Mobile single product help

This topic contains 14 replies, has 2 voices, and was last updated by Aizaz Imtiaz Awan Aizaz Imtiaz Awan 1 week, 2 days ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #279420

    ipcom
    Customer

    How can i change the size of the size attributes(name, swatches name), the size of the quantity box along with buy button and move the “x clear” next to size attributes (not below them)? I am providing a screenshot.

    Private Content Hidden
    Attachments:
    You must be logged in to view attached files.
    #279422

    ipcom
    Customer

    I want to change this only on mobile.

    #279551

    Hello,

    I saw the screenshot you attached. Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

    .product-design-default .variations_form .reset_variations {
        position: relative;
        bottom: 0;
        left: 5px;
    }
    
    body .single_add_to_cart_button {
        width: 60%;
    }

    Best Regards

    #279553

    ipcom
    Customer

    I tried the code about the size of the add to cart button, but it doesn’t work. Nothing changes.

    #279555

    ipcom
    Customer

    Also, i want to make the quantity box and the add to cart button bigger, not wider.

    #279633

    Hello,

    Please replace the previous Custom CSS with the following in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

    button.single_add_to_cart_button.button.alt {
        height: 70px;
        font-size: 25px;
    }
    
    div.quantity input[type=button], div.quantity input[type=number] {
        height: 70px;
        font-size: 25px;
    }

    Best Regards

    #279640

    ipcom
    Customer

    Great that worked. Now, how can i center the size swatches with equal blank space between the add to cart button and the size guide in mobile? I have attached a screenshot.

    Attachments:
    You must be logged in to view attached files.
    #279709

    Hello,

    Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

    .product-design-default .variations_form.variation-swatch-selected .variations {
        margin-bottom: 20px;
    }

    Regards.
    Xtemos Studios

    #279759

    ipcom
    Customer

    Now, how can i make the add to cart button wider on mobile and bring the tab section closer. I have provided a screenshot.

    Attachments:
    You must be logged in to view attached files.
    #279955

    Hello,

    I saw the screenshot you attached.

    Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

    body .single_add_to_cart_button {
        width: 60%;
    }
    
    .woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled {
        margin-bottom: -15px;
    }

    Regards.
    Xtemos Studios.

    #280008

    ipcom
    Customer

    Nope. It doesn’t change anything. The button stays the same. Neither the button is wider, nor it’s moving to the bottom.

    #280028

    ipcom
    Customer

    I only need the code which makes the button wider.

    #280126

    Hello,

    I have visited your website and the add to cart button is already wide.

    Screenshot for Clarification: https://prnt.sc/117bbfn

    Please clear cache and check back.

    Regards.
    Xtemos Studios

    #280129

    ipcom
    Customer

    Yes, if you resize the window on desktop it is. But, i am trying in an Iphone Safari and it’s still not wide. And i don’t have any cache plugins enabled.

    #280183

    Hello,

    Please replace the previous Custom CSS with the following then clear cache and check back.

    .product-type-simple form.cart,
    .woocommerce-variation-add-to-cart {
      display: flex;
    }
    .product-type-simple form.cart > button,
    .woocommerce-variation-add-to-cart > button {
      flex-grow: 1;
    }

    Regards.
    Xtemos Studios

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.