Move add to cart button to the price line

  • Resolved newhere10

    (@newhere10)


    3 years, 10 months ago

    Hi,

    I would like to have the Add To Cart button on the same line as the price in my products page.

    For example $22.99 | Add To Cart

    I’m using the basic WooCommerce version and I couldn’t figure out the css code for this.

    can you please help me with the code? I would also like to have the line break between the two.

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)

  • Please post the address of a relevant page so the markup and styles can be examined with browser tools.

    Thread Starter newhere10

    (@newhere10)

    This is the link to one of the products page

    https://eveandberri.com/product-category/skin-care/

    Thank you

    To get the price and add-to-cart on the same line, try this custom css:

    .woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  display: inline-block !important;
}

    Custom css can be entered at:
    Dashboard > Appearance > Customize > Additional CSS

    I don’t follow how there can be a line break between the two if they are on the same line.

    Thread Starter newhere10

    (@newhere10)

    It worked!!! Thank you so much! I will figure out how to add a line break, if it’s possible.

    Hi @newhere10

    Glad to hear the code @lorro provided worked! I’m marking this thread as resolved. If you have any other questions, please feel free to open a new topic.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Move add to cart button to the price line’ is closed to new replies.