Home Forums WoodMart – Premium Template Increase the add to cart button size

This topic contains 17 replies, has 3 voices, and was last updated by Elise Noromit Elise Noromit 4 days, 10 hours ago.

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #204388

    hazesmokeshop
    Customer

    Dear Support,

    Will you please help me in increasing the “Add to cart” button size on single product page and quick view page on all devices i.e. PC, tablet and phone? I checked the theme settings and was not able to see any options. I want the add to cart button to take the rest of the remaining space on the right side. As shown in the picture, I want the add to cart button to span over the red box.

    Thanks.

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

    Hello,

    I saw the screenshot you attached. If we try to make the add to cart button to full width it would go in the next line as for different sets of devices. So you need to use media queries for all sets of devices.

    For example the following Custom CSS will make the add to cart button take the remaining width for desktop.

    You need to add this in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

    .single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed {
    width: 81%;
    }

    Use the following CSS for the Quick View add to cart button for desktop.

    .mfp-content .single_add_to_cart_button.button.alt {
    width: 76%;
    }

    You can set it for different mobile and tablet devices respectively by setting the width and adding the CSS in the Mobile and tablet CSS area.

    Best Regards.

    #204686

    hazesmokeshop
    Customer

    Hi Aizaz,

    Thanks for sharing the details.

    I did the changes in Desktop CSS and it worked good on Desktop; however, when I do the changes on the mobile CSS, the values on the quick view page works and it doesn’t work on the single product page on iphone. Also, when I check the site on https://www.responsinator.com/ I am able to see the changes properly but when I use the real device for testing, the changes on the single product page are not there. The code that I applied to the Mobile CSS menu is given below.

    
    .mfp-content .single_add_to_cart_button.button.alt {
    width: 70%;
    }
    
    .product-image-summary .single_add_to_cart_button {
    width: 63%;
    }
    
    #204729

    Hello,

    Please replace all the code provided above with this one:

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

    Please add this code to the Theme Settings > Custom CSS > Desktop/Tablet/Landscape

    Do not insert into Global and Mobile.

    Best Regards

    #204881

    hazesmokeshop
    Customer

    Hi Elise,

    Thanks for sharing the code.

    I have two issues now.

    1- The code doesn’t work for a single product quickview add-to-cart button. Please see below screenshot.
    https://prnt.sc/t2uuw4

    2- Button size on mobile didn’t change? Shall I apply this code in global rather than the other parts?

    Thanks.

    #205000

    Hello,

    Please replace the code with this one:

    .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;
    }

    If you want it to work on mobile, insert this code to the Theme Settings > Global.

    Best Regards

    #205904

    hazesmokeshop
    Customer

    Hi Elise,

    Thanks for sharing the code. It works for me but I am having a problem with this CSS when I enable one of my other plugin “Sales booster” as shown below in /1/. The button is squeezed. If I remove the CSS, the Add to cart button size goes to normal and the plugin works good. Will you please help in fixing this?

    /1/
    https://prnt.sc/t5cdty

    Thanks.

    #206036

    Hello,

    We have not tested this plugin with our theme, at the same time, our theme default styles inherit Woocommerce default styles in order to ensure support of the widest range of plugins.
    The custom CSS we have provided is workable provided no additional elements are in the container of the Add to cart button, however, the plugin adds the elements to the container.

    Unfortunately, it is not possible to change that. Thus you need to decide: either you use the full-width button or you have the correct plugin view.

    Alternatively, we can provide custom CSS which would increase the width of the button but it would not 100% full-width. https://prnt.sc/t5iw12 and https://prnt.sc/t5iw8m

    Best Regards

    #207131

    hazesmokeshop
    Customer

    Hi Elise,

    Thanks a lot for the details. I would skip that plugin.

    I was trying another plugin for bundled products and I see that the add to cart button is small on bundled product page. Will you please share the CSS for increasing the size of Add to Cart button for bundled products as well?

    Thanks.

    Private Content Hidden
    #207185

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    .btns-shop-light .single_add_to_cart_button{
    width:70%;
    }

    Best Regards

    #207340

    hazesmokeshop
    Customer

    Hi Elise,

    Can we use the flex option for this button as well?

    Thanks.

    #207456

    Hello,

    Yes, you can. Here is the code:

    .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;
    }

    Best Regards

    #207674

    hazesmokeshop
    Customer

    Hi Elise,

    I tried this code and it didn’t change the button size.

    Thanks.

    Private Content Hidden
    #207756

    Hello,

    This code works on the default Add to cart button without plugins as I explained before. Try to check the code without plugins.

    Best Regards

    #207894

    hazesmokeshop
    Customer

    Hi Elise,

    Presently, the code works with the single product/variable product but it doesn’t work for the bundled product.
    Please check the links below:

    Thanks.

    Private Content Hidden
    #208022

    Hello,

    Please use this custom CSS for the grouped products:

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

    Best Regards

    #208177

    hazesmokeshop
    Customer

    Hi Elise,

    Looks good to me, thank for share the code. Please close this thread.

    #208201

    You are welcome! If you have any questions please feel free to contact us.

    Best Regards

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

The topic ‘Increase the add to cart button size’ is closed to new replies.