How to add margin underneath woocommerce total price amount -> productpages

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.

  1. 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.

Related Posts:

  1. CSS change in woo commerce Place Order Text [closed]
  2. PHP function for horizontal Woocommerce thumbnails and badges
  3. Edit tag cloud widget number
  4. How to get the original price of the product in woocommerce?
  5. How to change “Shipping Calculator “field label on Cart Page – woocommerce? [closed]
  6. Hide a menu-item and its submenus and display a ‘Log in’ link if the user is logged out
  7. Cleanest/Fastest way to avoid calling and retrieving data from the database multiple times?
  8. Best way of adding CSS which can be manipulated by the user via theme option panels?
  9. WooCommerce – Display variation custom field value [closed]
  10. Output a WooCommerce product custom field in WooCommerce using get_post_meta()
  11. Woocommerce: Is it possible to overide the settings for allowing to purchase out of stock products [closed]
  12. Woocommerce HTML email option unavailable
  13. Using PHP to toggle stylesheet and header image, set in cookie
  14. How to add SVG icon above product tab title
  15. My Own layout in WooCommerce pages [closed]
  16. Woocommerce – remove product from category
  17. Limiting woocommerce line_total decimal length
  18. How do you add customer capability after Woocommerce purchase?
  19. WooCommerce – Reset quantity input field when variation changes
  20. get current product name in functions.php
  21. Image as Sales Badge
  22. Hide Hamburger Menu On Specific Page (Front Page/Home Page)
  23. Automatically remove a canceled order in Woocommerce
  24. How to style options page in dashboard?
  25. How can I apply_filters from inside a function?
  26. Pass Category Name, Description and Photo into variables to pass to jQuery
  27. Display a specific category of products in shop page and disable code for specific actions
  28. Woocommerce: hook action/filter I could use to add variation id and price with each attribute opt on WooCommerce Rest api
  29. WooCommerce: How can I get orders with a custom ID in order meta data object?
  30. How can I get the values of my WordPress $wpdb query in Jquery?
  31. Validation algorithm in checkout field
  32. Css loads very slow [closed]
  33. My new button is in the wrong place
  34. Redirect to another page using contact form 7? [closed]
  35. height should be set to auto to avoid pixelation in the post thumbnail function
  36. How to make container class in PHP
  37. Creating a mobile site by adding a new class to the body tag from functions.php
  38. require_once() if a product in woocommerce contains a tag [closed]
  39. Remove item in Checkout
  40. How do I change this function from two returns to one string to show sku and dimensions in WooCommerce cart?
  41. woocommerce specific quantities for product
  42. woocommerce related product title length
  43. Changing the order of custom fields in the dashboard for Woocommerce variable products [closed]
  44. Problem with adding custom CSS class to image in ACF Photo Gallery plugin [closed]
  45. How do i wrap woocomerce attribute in list?
  46. Removing files programmatically
  47. Custom Taxonomy Select Menu: Setting default option value?
  48. Execute PHP code only with specific user role
  49. Woocommerce order status payment
  50. Output product category link from WP_Query
  51. how to changes mobile menu toggle breakpoint in WordPress
  52. Woocommerce – Exclude variation attribute on specific variation
  53. Billing detail page doesn’t work after I’ve changed the order of the Woocommerce navigation
  54. php code for outputting a custom page in my account
  55. Hide specific shipping methode depending on day and time of day
  56. Programmatically add a product to the cart and set price to zero when buying from certain category
  57. I want to show cart items number if any or nothing, simple CART text
  58. Adding custom field to product category and show it to shop/category shop page
  59. How to hide a div section when user is logged in, in single product woocommerce
  60. Hide payment method based on user role AND minimum cart value
  61. WooCommerce display price before add to cart [closed]
  62. Remove span tags from WooCommerce Downloads page
  63. Best way to use variables in multiple functions?
  64. Discount in the specific product title using keyword ( Woocoommerce )
  65. Including user data in “new user notification email”
  66. Adding product permalink on admin order page throwing error
  67. Add Shortcode to ::before class
  68. How to override WooCommerce Order Item Meta with data from Cart?
  69. Site title not showing. Please help me
  70. Woocommerce textarea format ignored
  71. How to auto-generate random numbers in username?
  72. Remove generated category and tag class names from woocommerce product & blog listings markup
  73. PHP/CSS: Shortcode won’t display correctly, and only displays in the head (before content)
  74. WP_Query To Display Product Of Brand On Taxonomy Page
  75. Woocommerce Add custom “Add to cart button” in single page with tags
  76. Hot to edit WooCOmmerce dashboard?
  77. Get Billing Email from WooCommece Checkout and Pass to Fullstory JS
  78. Add class for the_post_thumbnail_caption()
  79. Add missing alt tag to featured images for “storefront” theme
  80. Displaying POST content with HTML tags and all
  81. Display specific main Sub Nav on Woocommerce product pages
  82. Clone the “proceed to cart” button and place it above checkout on the cart page, but only appear display size is 320px
  83. Highlight Single Page Ancestor
  84. Use WP_Query Data In Cookie
  85. Woocommerce Price Text
  86. Styling admin page rows in order of importance (checkboxes)
  87. How to have Function of a plugin using global vars into a shortcode?
  88. Cant get theme to change footer color through theme customizer
  89. How to get the rating value of each comment
  90. How do I get Roboto Google Font to display normal font-style? [closed]
  91. Integrating CSS Into a WP Function Call [closed]
  92. Woocommerce – Shipping tax class based on cart items not using the highest tax available
  93. Load slideshow.css file only if Slideshow is checked / on
  94. Sorting Problem
  95. Warning: Attempt to read property “term_id” on int – Woocommerce
  96. Replace the image of a product with its video in the shop page
  97. Hide child of parent categories already hidden with “get_terms_args” – Woocommerce
  98. Automatically change insurance quantity based on cart total [closed]
  99. Change WooCommerce Order status from frontend form submitted data
  100. Add text below WooCommerce short description if metabox value is true