Ask Your Question
1

What is the method to place the price and add-to-cart button side by side on a woocommerce page for a specific product?

asked 2021-10-26 11:00:00 +0000

lakamha gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
1

answered 2022-09-22 04:00:00 +0000

bukephalos gravatar image

Here is one way to achieve this:

  1. Go to the product page in WooCommerce and click on the "Edit" button to access the product editor.

  2. Scroll down to the "Product Data" section and click on the "Custom Fields" tab.

  3. Add a new custom field with the name "pricebuttonposition" and set the value to "side-by-side" (without quotes).

  4. Save the product changes and go to the Appearance > Customize page in WordPress.

  5. Click on the "Additional CSS" tab and add the following code:

.single-product .summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.single-product .price {
    order: 1;
}

.single-product .woocommerce-Button {
    order: 2;
}

This CSS code will display the price and add-to-cart button side by side on the product page, with the price on the left and the button on the right.

Note: If you want to apply this change globally to all products, you can add the custom field to the "Custom Fields" section under "Products" in the WordPress dashboard and modify the CSS accordingly.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2021-10-26 11:00:00 +0000

Seen: 2 times

Last updated: Sep 22 '22