php facetwp woocommerce image + sale html for layout builder

Posted 2021-05-04

<?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 });