[Resolved] Change look of woocommerce product page in generatepress for bought products

[William]

Hi there,

Is there a way to make the product page in Generate Press for woocommerce products look different when it is bought?

What I would like is something that has (see image for visualization):

– The product title at the top centered
– The image/featured image of the product to be stretched to full screen, centered
– The information of the product to be removed

Would this be possible?

Kind regards,

Will

[Elvin]

Hi Will,

This is a bit complex to do as you’ll need a child theme template for the single product page with a condition where checks if the current user has a paid purchase w/ completed purchase order status then displays this layout.

But I don’t think this is the best approach to this. If I’m understanding it correctly, you seem to be trying to sell digital products (PDF) and have it hosted as well on the same site for actual reading for your customers. I believe you’re trying to do something like this site? https://manybooks.net/titles/burnettfetext94lprss11.html

If this is the actual case, you should have a page that display all products purchased by user which will be an archive page showing all the purchased products of the user.

And when a user clicks on a user’s item, the user should be brought to a dynamic PDF viewer page that loads the file the user purchased.

This is quite a complex site structure where you might need to hire a custom developer to do it for you, or purchase a plugin that lets you do it. Like this one – https://wordpress.org/plugins/ebook-store/

[William]

Hi there,

Thanks for your response. That is pretty much it although I am using Paywall which is able to change the file shown next to the product on the product page on purchase. https://woocommerce.com/products/paywall-for-woocommerce/

What I see on mobile is kind of what I am looking for, where GeneratePress stacks it so that the image/featured/file etc. for the product appears ontop, and then for the corresponding product info to be below it:

What I could see as an option is to have that appear as the same but for desktop, using some if statement that determines that product has been purchased – is that possible?

Something like this maybe, using a bit from here:

function change_product_page_look_desktop () {
   global $product;
   if ( ! is_user_logged_in() ) return;
   if ( wc_customer_bought_product( '', get_current_user_id(), $product->get_id() ) ) {
      CODE TO STACK ON MOBILE AND REMOVE PRODUCT INFO GOES HERE;
   }

Kind regards,

Will

[Elvin]

CODE TO STACK ON MOBILE AND REMOVE PRODUCT INFO GOES HERE;

For this, did you mean to remove the product info on desktop only? and keep it shown on mobile?

[William]

To be honest, having the product info removed on both is fine if that is easier. If not, it’s more about making sure the product info is stacked below the product image etc., or removed altogether, just for those who have bought it.

[David]

Hi there,

tricky one… first thing, that function you shared checks if a user has bought the product. Are you also wanting to check if they have it in their cart ( but not yet purchased it ) ?

[William]

No, I think having it apply to just users that are logged in and have purchased the product is correct for the functionality I was hoping for – if that works above, I’m just a bit confused how you can either 1) remove the product info in that situation and have the product image appear full screen or 2) have the desktop stack exactly the same way as mobile. Either way, to have the product image appear first full screen.

[David]

Ok so i would probably approach it like so:

1. Create a helper function to check if the product has been purchased:

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

2. Then we can check to see if we’re on a single product and db_user_has_bought_product is true and unhook the entire summary content and rehook in the title:

add_action('wp', function() {
    if ( ! class_exists( 'WooCommerce' ) ) {
	    return; // exit if woocommerce is not active
	}
    if ( is_product() && db_user_has_bought_product() ) {
        remove_all_actions( 'woocommerce_single_product_summary' );
        add_action( 'woocommerce_before_single_product_summary','woocommerce_template_single_title' );
    }
});

3. And then we can try adding a body_class if the product has been bought:

add_filter( 'body_class', 'db_bought_product' );
function db_bought_product( $classes ) {
    if ( class_exists( 'WooCommerce' ) && is_product() && db_user_has_bought_product() ) {
        $classes[] = 'user-has-bought';
    }
    return $classes;
}

4. Then we throw some CSS at it to make the image 100% wide and remove any left over summary HTML:

.user-has-bought.woocommerce div.product div.images {
    width: 100% !important;
}
.user-has-bought.woocommerce div.product div.summary {
    display: none;
}

Might be fun debugging that if it doesn’t work lol

[William]

This is absolutely amazing, works perfect – thank you so so so much!

[David]

Well that has made my day! Glad to hear that worked.

[William]

Hi there,

Sorry to come back to this – one thing I was wondering is if this could apply to every product except this one here (as this is not a pdf) – what line of code would I need to add to exclude this from affecting this product?

Kind regards,

Will

[David]

You cant try changing this function:

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

to:

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 ) && $id != 123 ) {
       return true;
    }
}

Then update the $id != 123 to match the ID you want to exclude

[William]

You’re amazing, thank you so much!

[David]

Glad to be of help!

[Author]

Posts