Created
March 25, 2019 14:45
-
-
Save djrmom/57b85bf77be2ab8dbc5abfdb004cabc7 to your computer and use it in GitHub Desktop.
facetwp woocommerce image+sale html for layout builder
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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 }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment