Here is one way to achieve this:
Go to the product page in WooCommerce and click on the "Edit" button to access the product editor.
Scroll down to the "Product Data" section and click on the "Custom Fields" tab.
Add a new custom field with the name "pricebuttonposition" and set the value to "side-by-side" (without quotes).
Save the product changes and go to the Appearance > Customize page in WordPress.
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.
Asked: 2021-10-26 11:00:00 +0000
Seen: 2 times
Last updated: Sep 22 '22