-
Posts
-
THIS IS NOT A SUPPORT REQUEST, IT’S JUST THE TIP BRO
Are you using the Advanced Layout option for your WooCommerce setup? Me too! Currently, Enfold only provides the essential sections for you to set up a product. I like to use the Special Heading object for the header, but I needed to have it display the price. Sure, I could just go in and edit it whenever I need to, but then I came across a time where I forgot to change it back after a scheduled sale ended. That, of course, meant I had to give a customer the sale price. So I took the time to create a custom shortcode that would give me the same look as the Special Heading, but would automatically display the base price regardless if it is on sale or not. That includes variable products by showing the lowest reg/sale price.
Here’s an example…
As always, place this code in your child theme’s functions.php file and customize as needed.
// Custom Price Header function getpriceheader( ){ global $product; $price = $product->get_price(); return '<div style="padding-bottom:10px;color:#d54e21;" class="av-special-heading av-special-heading-h4 custom-color-heading avia-builder-el-9 avia-builder-el-no-sibling"><h2 class="av-special-heading-tag" itemprop="headline">Starting at only $'.$price.'</h2><div class="special-heading-border"><div class="special-heading-inner-border" style="border-color:#d54e21;"></div></div></div>'; } add_shortcode( 'priceheader', 'getpriceheader' );Here is a small update to the code which allows you to include an optional suffix to the pricing header.
Like before, this is for those who use the custom layout builder for their WooCommerce product listings and the plugin Advanced Custom Fields. The custom field would be added to the product edit screens.
// Custom Price Header function getpriceheader( ){ global $product; $price = $product->get_price(); $price_suffix = get_field('price_suffix'); if ($price_suffix){ $suffix = '<small class="price_suffix">' . $price_suffix . '</small>'; } return '<div style="padding-bottom:10px;color:#d54e21;" class="av-special-heading av-special-heading-h4 custom-color-heading avia-builder-el-9 avia-builder-el-no-sibling"><h2 class="av-special-heading-tag" itemprop="headline">Starting at only $'.$price . $suffix.'</h2><div class="special-heading-border"><div class="special-heading-inner-border" style="border-color:#d54e21;"></div></div></div>'; } add_shortcode( 'priceheader', 'getpriceheader' );Now…the next thing that comes up when using these is styling. I wanted the text to be a little smaller than the default setting for “small” elements in the stock CSS. I also didn’t like the look on mobile since the text would spill over to another line….just didn’t look right. So a few little CSS tricks cover this so that the text will be a little smaller and will automatically bump all of the suffixes to a new line on mobile screens only.
/* all screens */ small.price_suffix {padding-left:10px !important; font-size:60% !important;}/* Mobile Only Mods */ @media only screen and (max-width: 767px){ small.price_suffix {display:block !important; padding-left:0px !important;} }/* Desktop Only Mods */ @media only screen and (min-width: 767px){ small.price_suffix {vertical-align:top !important;} }Hi,
We appreciate for sharing the snippet!
Please also note that we have the Enfold Library
https://github.com/KriesiMedia/enfold-library/
Where we would lobe if you can submit any updates!
We will make sure to merge the push!Best regards,
BasilisUPDATE
While this still works, I have also created a custom Advanced Layout Builder element that does the same thing to make it easier. Just follow the instructions and you should be good to go.
- You must be logged in to reply to this topic.