Custom Product Images w/Sale Tags

THIS IS NOT A SUPPORT REQUEST, IT’S JUST THE TIP BRO
Like many others, I am using the advanced layout builder for my WooCommerce product pages. For me, the default layouts with a standard setup weren’t working for my needs. For those interested, here is some code you can use to create a custom shortcode to throw in the code widget which will automatically call and display the featured graphic in much the same way the default setup does, but with an added bonus of slapping on a sale badge if the product is on sale. Note that I am also using ACF (Advanced Custom Fields) with my setup to get specific extras. For instance, in this example, I use it to add specific sale details on the sale badge like “SAVE 10%”. Otherwise, it will just say “SALE” on the badge. If you aren’t using ACF, I highly recommend it if you plan to add a lot of customizations to your site in general.

As always, place this code in your child theme’s functions.php file and customize as needed. For this, I have two options… One for a product image that can be clicked on to view the larger graphic in a lightbox, and another that is just an image. I use both options depending if the item is a physical product or a service.

Here are examples…

// Shortcode for product image
function show_product_image() {
	global $product;
if ( $product->is_on_sale() ) {
	$sale_badge_bg = "[direct link to your sale badge/ribbon graphic]";
	$sale_tagline = get_field('sale_tag');
	if ($sale_tagline) {
	$sale_tag = " - " . $sale_tagline;
	$sale_badge = "<h2 style='background: url(".$sale_badge_bg.") no-repeat scroll right center; background-size:cover; width: max-content; text-align:left; color:#f5f5f5; font-size:22px; padding:13px 20px 13px 13px; position:absolute; top:-4px; z-index:10;'>SALE". $sale_tag ."</h2>";
	}}
	$product_image = get_the_post_thumbnail( $post_id, 'shop_catalog' );
	$product_image_large = get_the_post_thumbnail_url( $post_id, 'large' );
	return '<div class="product-image avia-image-container avia-builder-el-12 el_after_av_codeblock el_before_av_hr avia-align-center no-overlay" itemscope="itemscope" itemtype="https://schema.org/ImageObject"><div class="avia-image-container-inner">' . $sale_badge .'<a rel="lightbox" data-rel="gallery-1" class="lightbox" href="' . $product_image_large . '">' . $product_image . '</a></div></div><section class="av_textblock_section " itemscope="itemscope" itemtype="https://schema.org/CreativeWork"><div class="avia_textblock text-center no-margin " itemprop="text"><p><small>CLICK TO PREVIEW</small></p>
</div></section>';
	}
add_shortcode( 'product_image', 'show_product_image' );

// Shortcode for nolink product image
function show_nolink_product_image() {
	global $product;
if ( $product->is_on_sale() ) {
	$sale_badge_bg = "[direct link to your sale badge/ribbon graphic]";
	$sale_tagline = get_field('sale_tag');
	if ($sale_tagline) {
	$sale_tag = " - " . $sale_tagline;
	$sale_badge = "<h2 style='background: url(".$sale_badge_bg.") no-repeat scroll right center; background-size:cover; width: max-content; text-align:left; color:#f5f5f5; font-size:22px; padding:13px 20px 13px 13px; position:absolute; top:-4px;'>SALE". $sale_tag ."</h2>";
	}}
	$product_image = get_the_post_thumbnail( $post_id, 'shop_catalog' );
	return '<div class="product-image avia-image-container avia-builder-el-12 el_after_av_codeblock el_before_av_hr avia-align-center no-overlay" itemscope="itemscope" itemtype="https://schema.org/ImageObject"><div class="avia-image-container-inner">' . $sale_badge . $product_image . '</div></div>';
	}
add_shortcode( 'nolink_product_image', 'show_nolink_product_image' );

I have plenty of code examples like this I can and will share provided the mods here don’t have a BF about it. ;P