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

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

Home Forums Support Change look of woocommerce product page in generatepress for bought products

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1969126
    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

    #1969180
    Elvin
    Staff
    Customer Support

    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/

    A wise man once said:
    "Have you cleared your cache?"

    #1969479
    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

    #1970241
    Elvin
    Staff
    Customer Support

    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?

    A wise man once said:
    "Have you cleared your cache?"

    #1970542
    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.

    #1970572
    David
    Staff
    Customer Support

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

    #1970590
    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.

    #1970630
    David
    Staff
    Customer Support

    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

    #1973972
    William

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

    #1974292
    David
    Staff
    Customer Support

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

    #1998398
    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

    #1998496
    David
    Staff
    Customer Support

    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

    #1999036
    William

    You’re amazing, thank you so much!

    #1999687
    David
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.