Mobile single product help

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.

Attachments:

You must be logged in to view attached files.

I want to change this only on mobile.

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

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

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

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

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.

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

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.

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.

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

I only need the code which makes the button wider.

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

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.

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

[Author]

Posts