i have 2 questions about the woocommerce price amounts on the productpages.

first question:

i want to add more margin under the total price amount, and the button 'add to card'

how can i manage this? (see picture below for an example)

Second. I want only the total price to be shown. Now i have the lowest price of the variable product, which is shown underneath the product title, and the total price amount. I only want to show the total price amount.

Already thank you!

i have 2 questions about the woocommerce price amounts on the productpages.

first question:

i want to add more margin under the total price amount, and the button 'add to card'

how can i manage this? (see picture below for an example)

Second. I want only the total price to be shown. Now i have the lowest price of the variable product, which is shown underneath the product title, and the total price amount. I only want to show the total price amount.

Already thank you!

• php
• functions
• woocommerce-offtopic
• css

• Melissa, you should try to provide some further info... ...a lot of themes have their own method out structuring the HTML code that displays products - let us know what your theme is, if you're using a child theme you can edit or not, perhaps paste the code that shows the HTML from that screen capture. Screen captures are good to illustrate a problem you're having but you should always add as much of the code as you possibly can. – Tony Djukic Commented Apr 16, 2020 at 1:27

1 Answer 1

I'm not sure about what exactly you already know in styling HTML, so I'll explain everything you probably need here.

Everything you need can be done in the CSS stylesheet applied to the page. Select the according HTML elements (the one containing the total price amount, the 'add to cart' button, and so on..) and apply the needed CSS properties, which in your case are (variables referred as capital letters):

1. The margin property. To define what's applied, you can either specify the specific margin, as for example margin-bottom: 10px; or margin-top:10px; or margin-right:10px; or margin-left:10px; to apply 10 pixels of margin at the bottom / to the top / to the right / to the left of the selected HTML element, respectively. You can also use the margin: property, whose result depends on the amount of values you provide:

If you provide four values (think like a clock):

margin: Apx Bpx Cpx Dpx;

A defines the number of pixels of margin you apply on top of the selected element

B the number of pixels applied to the right of it

C at the bottom of it

D to the left of it.

If you specify three values:

margin: Apx Bpx Cpx;

A is the number of pixels of margin you apply to the top of the selected element

B the number of pixels applied to the left AND the right

C the number of pixels applied at the bottom

If you specify two values:

margin: Apx Bpx;

A represents the number of pixels of margin applied to the top AND the bottom

B the number of pixels applied to the right AND the left

And if you specify only one value:

margin: Apx;

Margin of A pixels gets applied onto all sides of the selected element.

2. To hide your content, you need to decide if you want to:

a) hide the content only, but let the corresponding element take its space (in this case, use visibility: hidden;)

b) not display anything of the corresponding element; not even allocate space for the corresponding element (in this case, use display: none;)

If your stylings don't change anything and you're sure that your selectors are correct and syntaxes are also fine, you should check the CSS specificity(ies). Try to avoid the use of !important, it will only give you headache when keeping on styling things later on. It should only be the last possible solution, when there's really no other way to apply the desired stylings.