<?php
/** replace feature image in layout builder with woocommerce html for image + sale icon/banner
** additional css styles will likely need to be added to replicate the styles used by woocommerce **/
add_filter( 'facetwp_builder_item_value', function( $value, $item ) {
if ( 'featured_image' == $item['source'] && 'product' == get_post_type( get_the_id() ) ) {
$product = wc_get_product( get_the_ID() );
ob_start();
woocommerce_template_loop_product_link_open();
woocommerce_show_product_loop_sale_flash();
woocommerce_template_loop_product_thumbnail();
woocommerce_template_loop_product_link_close();
$value = ob_get_clean();
}
return $value;
}, 10, 2 );
/** adding the woocomerce class to your page may help apply existing styles for sale and image **/
add_filter( 'body_class', function( $classes ) {
if ( is_page( 'a-product-shortcode-test' ) ) {
$classes[] = 'woocommerce';
return $classes;
}
});
/** the default woocommerce styles use absolute positioning, this is an example that can be modified
** to fit your design **/
add_action( 'wp_head', function() { ?>
<style>
.woocommerce .fwpl-item {
position: relative;
}
.woocommerce .fwpl-item .onsale {
top: 0;
right: 0;
left: auto;
margin: -.5em -.5em 0 0;
}
</style>
<?php });