Home>Support>Position of ‘add to cart’ button on featured products page and related products on cart page

Position of ‘add to cart’ button on featured products page and related products on cart page

By keesieboy, 6 years ago. Last reply by rmarquez, 5 years ago.

Dear Andrew (or colleague),

I want to change the position of ‘add to cart’ buttons on the featured products page, and the related products on the cart page.
I want all button in the same line, but now buttons are in different lines depending on product title long.
I saw this thread: https://siteorigin.com/thread/position-of-add-to-cart-button/

But it does not solve my problem, the buttons keep out of line, nothing changes I guess.
Could you please tell me what to do?

URL: https://exclusievehoesjes.eu

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 6 years, 3 months ago Andrew Misplon Hi, I Work Here

    Hi Keesieboy

    You can fix/change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.

    /* WooCommerce */
    
    .product a:first-of-type {
    	display: block;
        min-height: 340px;
    }
    
  2. 6 years, 3 months ago keesieboy

    Hi Andrew,

    Thank you for the quick reply and solution! It looks very neat now.
    Always great support from you guts btw!

  3. 6 years, 3 months ago Andrew Misplon Hi, I Work Here

    Awesome :) Glad to hear that did the trick.

    Thanks for your support. All the best with your site.

  4. 6 years, 3 months ago keesieboy

    Oops, but now when a product is clicked, the page looks very strange, you can see here: https://exclusievehoesjes.eu/product/dromenvanger-hoesje-iphone-6-6s/
    The custom CSS from you is the only CSS that I have applied on my site…

  5. 6 years, 3 months ago Andrew Misplon Hi, I Work Here

    Mmm I think I’ve faced this problem before. Can you send me a list of pages where the buttons needs to align on?

  6. 6 years, 3 months ago keesieboy

    Sorry I don’t know what you mean exactly.
    The problem is only the product page, each product has this issue.

  7. 6 years, 3 months ago Andrew Misplon Hi, I Work Here

    Try swapping the previous CSS rule out with the below:

    /* WooCommerce */
    
    body:not(.single-product) .product a:first-of-type {
    display: block;
    min-height: 340px;
    }
    
  8. 6 years, 3 months ago keesieboy

    I have added the CSS and it looks much better! Only thing are the related products, you can see here: https://exclusievehoesjes.eu/product/glitter-sticker-goud-iphone-6-6s/ at the bottom of the page. The add to cart (voeg toe aan winkelwagen) is not displayed correctly.

  9. 6 years, 3 months ago Andrew Misplon Hi, I Work Here

    Sure. Try the following:

    .woocommerce.single-product #page-wrapper .related.products ul.products li.product {
        max-width: none;
    }
    
    .woocommerce.single-product ul.products li.product, 
    .woocommerce-page.single-product ul.products li.product {
        width: 26%;
    }
    
  10. 6 years, 3 months ago keesieboy

    YES :) very happy now with the result, thanks again for the great support!

  11. 6 years, 3 months ago Andrew Misplon Hi, I Work Here

    For sure :)

  12. 6 years, 3 months ago keesieboy

    Hi Andrew,

    I have got a bit of the same problem on the product overview pages, please see: https://exclusievehoesjes.eu/iphone/iphone-6-6s/
    Is there also a CSS code for that problem that I can implement?

    And when I visit my website on my mobile phone and go to the product overview page, I see 1 product per row, is it possible to change that to 2 products per row?

  13. 6 years, 3 months ago Andrew Misplon Hi, I Work Here

    Hi Keesieboy

    You can fix/change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.

    @media (max-width: 767px) {
    	.dhvc-woo-row-fluid [class*="dhvc-woo-span"] {
    	    float: left;
    	    margin-left: 1em;
    	    width: 47%;
    	}
    }
    
  14. 6 years, 3 months ago keesieboy

    Hi Andrew,

    Great! Thanks for the custom CSS.
    And my other question, is it possible to change the number of products in a row to show (mobile)?
    When I open my website and navigate to the product overview (on my phone) it shows 1 product per row, is that changeable?

  15. 6 years, 3 months ago Andrew Misplon Hi, I Work Here

    Try changing the last Custom CSS sent to the following:

    @media (max-width: 767px) {
    	.dhvc-woo-row-fluid [class*="dhvc-woo-span"] {
    	    float: left !important;
    	    margin-left: 1em !important;
    	    width: 47% !important;
    	}
    }
    
  16. 6 years, 3 months ago keesieboy

    Almost! The products are now smaller but not 2 in a row, still 1 in a row unfortunately

  17. 6 years, 3 months ago keesieboy

    When I put my phone in landscape mode, there are 2 products in a row, but not when I hold my phone the normal way

  18. 6 years, 3 months ago Andrew Misplon Hi, I Work Here

    In the first line of our CSS snippet is this:

    (max-width: 767px)
    

    Increase that value to say 1024 and check the result.

  19. 6 years, 3 months ago keesieboy

    Thanks, I also changed the width from 47% to 44% and now there are 2 products in a row :)

    This will be my last question and I hope you understand what I mean…
    Is it possible to not show my logo and header text but show the menu at the top when someone visits my website?
    So I don’t want them to be removed, but only how do you say, drop downed?
    Please see the screenshots so you understand it a little better: http://nl.tinypic.com/r/evcg91/8 and http://nl.tinypic.com/r/25u5jkw/8

  20. 6 years, 3 months ago Andrew Misplon Hi, I Work Here

    Sure. From Theme Settings > Layout you can set your Masthead Layout to “Logo in Menu”. You can also go back to Theme Settings > Logo after that and disable the logo size constraint.

  21. 6 years, 3 months ago keesieboy

    But I want my logo and the header text not te be removed or in the menu.
    I want to see the menu on top when you visit my website, and when you scroll up you can see the logo and the header text again.

    That would be really great.

  22. 6 years, 3 months ago Andrew Misplon Hi, I Work Here

    This, unfortunately, isn’t possible in Vantage. This feature hasn’t been built into the theme. Sorry I don’t have more on this.

  23. 6 years, 3 months ago keesieboy

    Ah that is a pity, but thanks for your help and have a nice weekend!

  24. 6 years, 3 months ago Andrew Misplon Hi, I Work Here

    For sure :) You too.

  25. 5 years, 6 months ago rmarquez

    Hey andrew i saw you´ve been active resolving others members problems that are very similar to the one im having right now, hope u can point me out on the right direction…cheers.

    Page: SiteOrigin – Free WordPress Themes and Plugins

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More