How to place the “Add to Cart” button to the right of the title and price

  • Resolved lefteris35

    (@lefteris35)


    3 years, 10 months ago

    How to place the “Add to Cart” button to the right of the title and price for all products in the entire shop?

    I use divi theme and woocommerce.
    When i use inspector i notice that the HTML structure of product is:

    <li>
<span class="onsale">Sale!</span>
    <a class="woocommerce-LoopProduct-link woocommerce-loop-product__link" href="my-site/product/product-1/" >
    
<span class="et_shop_image"
<img src="https://my-site/wp-content/uploads/woocommerce-placeholder-300x300.png" class="woocommerce-placeholder wp-post-image" alt="Placeholder" loading="lazy" srcset="my-site/wp-content/uploads/woocommerce-placeholder-300x300.png 300w, ...">
>
<span class="et_overlay">
::before
</span>
<h2 class="woocommerce-loop-product__title">Product 1</h2>
<span class="price">...</span>
</a>
    
    <a class="button product_type_variable add_to_cart_button" href="my-site/product/product-1/" >...</a>
</li>

    How can I add the <a href="my-site/product/product-1/">...</a> inside the <a href="my-site/product/product-1/">..</a> and right of of the title and price?

    Thank’s

    • This topic was modified 3 years, 10 months ago by lefteris35.
    • This topic was modified 3 years, 10 months ago by lefteris35.
    • This topic was modified 3 years, 10 months ago by lefteris35.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Gabriel – a11n

    (@gabrielfuentes)

    Hi there ??

    This can be fixed with some custom CSS. Under Customize > Additional CSS, you can add the following code:
    ?

    /* Align shopping cart button with product title */
.product a.button.add_to_cart_button {
    position: absolute !important;
    bottom: 0 !important;
    right: 0!important;
}

    Here is a screenshot:

    https://www.screencast.com/t/fYAxjgKYetX

    If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

    Cheers ??

    • This reply was modified 3 years, 10 months ago by Gabriel - a11n. Reason: added an extra selector
    Thread Starter lefteris35

    (@lefteris35)

    Your CSS Works! ??

    May i ask an something more?

    For simple products like “Product 2 and product-2-copy” how can I make the “add-to-cart” button stable (do not move) when clicked.

    Thank’s again!

    Plugin Support Tseten a11n

    (@tibetanitech)

    Hi @lefteris35

    Since making the add-to-cart button stay in the same position instead of moving is related to Javascript, it might be coming from your theme.

    I would recommend reaching out to the theme developers for further assistance as this is something that is quite complex and isn’t part of WooCommerce functionality.

    Thread Starter lefteris35

    (@lefteris35)

    OK! Thank you for support!

    You’re welcome @lefteris35

    I’ll mark this thread as resolved now. Feel free to create a new topic if you have any more questions. ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to place the “Add to Cart” button to the right of the title and price’ is closed to new replies.