- This topic has 7 replies, 3 voices, and was last updated 2 years, 5 months ago by David.
-
AuthorPosts
-
October 25, 2021 at 6:12 pm #1975280William
Hi there,
I absolutely love GeneratePress and nearly have a website ready to go live, except for one bit. I have a piece of code that states if a product has been purchased or not:
function db_user_has_bought_product() { if ( ! class_exists( 'WooCommerce' ) || ! is_user_logged_in() ) { return; } $product = wc_get_product(); $id = $product->get_id(); if ( wc_customer_bought_product( '', get_current_user_id(), $id ) ) { return true; } }
On one specific page only (where I show a selection of products), I would like to be able to change the product images to something else (i.e. an image with a lock sign, suggesting the product has not been bought yet).
Is there a way to change the product image on one page if the product has not been bought yet, such as the below image?
October 25, 2021 at 9:55 pm #1975372ElvinStaffCustomer SupportHi William,
I think what you need is a lock overlay instead of an image replacement.
Try adding this PHP:
add_action('woocommerce_before_shop_loop_item_title',function(){ if( !db_user_has_bought_product() ){ echo '<div class="lock-overlay"> <div class="lock-wrapper"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lock" class="svg-inline--fa fa-lock fa-w-14" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"/></svg> </div> </div>'; } });
And then add this CSS:
.lock-overlay{ height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 10; } .lock-wrapper{ display: flex; align-content: center; justify-content: center; align-items: center; height: 100%; background-color: rgba( 255, 255, 255, 0.8); } .lock-wrapper > svg { width: 20px; color: black; }
October 26, 2021 at 9:26 am #1976359WilliamThat’s absolutely amazing – thank you! That does the job perfectly for the shop page. However, I was hoping to have the functionality only appear on a standalone page which has hand selected products (and not on the shop page):
Is there a way to only show lock signs for products not bought when shown the products or a specific page only (using the hand picked gutenberg woocommerce block)?
Kind regards,
Willl
October 26, 2021 at 10:45 am #1976448DavidStaffCustomer SupportHi there,
not easily doable when using a Woocommerce Block – if you try a Woocomemrce Shortcode instead you should find Elvins code will work.
October 27, 2021 at 5:38 am #1977988WilliamHi there,
That’s absolutely perfect thank you! I stuck the CSS on the specific page and wonder if I can add your code to just that page too? Otherwise, the shop will show the padlock etc.?
October 27, 2021 at 5:57 am #1978029DavidStaffCustomer SupportIn Elvins snippet – this line:
if( !db_user_has_bought_product() ){
try this:
if( is_page('the-page-slug') && !db_user_has_bought_product() ){
To check for the specific page you want it applied to
October 27, 2021 at 6:13 am #1978059WilliamPerfect thank you! 🙂
October 27, 2021 at 6:23 am #1978083DavidStaffCustomer SupportGlad we could be of help!
-
AuthorPosts
- You must be logged in to reply to this topic.