Site logo

Archived topic

GeneratePress does not seem to recognise a custom WooCommerce shortcode

9 replies · Started by Daniel on March 10, 2022

Viewing posts 1–10 of 10

Hi there!

If I'm not mistaken, GeneratePress adds html elements to the WooCommerce product listings such as the "wc-product-image" and "inside-wc-product-image" div containing the product image.

I can also use WooCommerce shortcodes like [products skus="1,4,8,9" limit="4" columns="4" ] and in the same way GeneratePress creates the same divs around the image.

I am developing a plugin to create dynamic WooCommerce product listings. To display those listings on a WordPress page, I use a custom shortcode like this [my-shortcode]. My shortcode uses a WooCommerce shortcode to create the product listings:

echo do_shortcode( '[products skus="'.$myvariable.'" limit="4" columns="4"]' );

We could say that it is a shortcode that generates a WooCommerce shortcode when it is displayed on the page.

However, if I use my shortcode on a page, the product listing is generated correctly but GeneratePress does not add the divs around the image.

If I use my shortcode and a WooCommerce shortcode on the same page, the latter is affected by GeneratePress but the former is not.

Can you give me any clue as to why this might be happening?

Hi there,

The Woo plugin is responsible for the templates including those it uses within its shortcodes. GPP simply provides the styles and some options to show hide various parts of those templates.

I cannot set why your 'dynamic' shortcode would not return the same result.

I can take a look if you want to share a link to the site - might provide some clues as to what is different

Thank you for your response David!

I probably explained myself wrong:
It is not GeneratePress (theme), it is GP Premium (plugin) with its WooCommerce module that creates various elements like the "wc-product-image" and "inside-wc-product-image" divs surrounding the product image. They appear when I activate GP Premium.

These html elements, which are also generated when using a WooCommerce shortcode, are not generated if I use the custom shortcode that all it does in the end is to execute a WooCommerce shortcode, and I can't figure out why.

I can give you the link so you can see it on the web but as I said, it is not a problem of CSS styles, but that the html elements are not generated.

Just to be clear GP or GPP doesn't add HTML to the templates, It simply provides options to hook/unhook Woo functions.
Can you share a link to where I can see the issue - happy to take a look?

Doesn't GPP adds html content via hooks?

I see new html content inside products listings when I activate GPP in a fresh WooCommerce install.

This is a default WooCommerce store which doesn't have the html divs around images that I get when using GPP: https://variousshape.s1-tastewp.com/tienda/

Page with the problem I am encountering: https://cutt.ly/VASUYj7

When entering the page I have this WooCommerce shortcode active [products limit="4" columns="4" ] and it correctly generates the divds "wc-product-image" and "inside-wc-product-image".

If you use the top filter (choose at least 3 options) it generates the list of results that do not contain the divs "wc-product-image" and "inside-wc-product-image".
Don't worry about the CSS, I'm just looking for the reason why the divs are not generated.

That is more likely because you're trying to pass values to the shortcode on the front end using presumably an Ajax query. And Woos shortcodes are not built for that.

Hello David

Little by little we have been able to make our custom shortcode work so that it returns the results via Ajax and displays them on the website using the WooCommerce shortcode.

We still have the problem of not generating the GPP divs around the image which I need for layout purposes.

I have seen that the function that creates them is the following:

function generatepress_wc_image_wrapper_open() {
    if (generatepress_wc_get_setting('product_archive_image')) {
        echo '<div class="wc-product-image"><div class="inside-wc-product-image">';
    }
}

function generatepress_wc_image_wrapper_close() {
    if (generatepress_wc_get_setting('product_archive_image')) {
        echo '</div></div>';
    }
}

add_filter('post_class', 'generatepress_wc_product_has_gallery');
add_filter('product_cat_class', 'generatepress_wc_product_has_gallery');

My question is: is there any way to execute that function during an Ajax request?

Hi there,

The hooks that GPP uses for those elements are:

add_action( 'woocommerce_before_shop_loop_item_title', 'generatepress_wc_image_wrapper_open', 8 );
add_action( 'woocommerce_before_subcategory_title', 'generatepress_wc_image_wrapper_open', 8 );
add_action( 'woocommerce_shop_loop_item_title', 'generatepress_wc_image_wrapper_close', 8 );
add_action( 'woocommerce_before_subcategory_title', 'generatepress_wc_image_wrapper_close', 20 );

So as long as those actions are available in the template, it shouldn't matter whether it's using AJAX or not.

The thing to check would be if woocommerce_before_shop_loop_item_title exists as a hook in the template when using the shortcode.

For example:

add_action( 'woocommerce_before_shop_loop_item_title', function() {
    echo 'hello world';
} );

If that doesn't output in the shortcode, it likely means the template the shortcode is using isn't using that hook.

Let me know :)

Thanks Tom!

Finally we have been able to add GPP classes to our custom plugin results filter using these actions in our plugin as you suggested.

add_action( 'woocommerce_before_shop_loop_item_title',function() {
    echo '<div class="wc-product-image"><div class="inside-wc-product-image">'; },7);

add_action( 'woocommerce_shop_loop_item_title', function() {
    echo '</div></div>'; },7 );

Now the filter results have the same clean GeneratePress shop style I was looking for.

Great to hear! :)

This archived topic is closed to new replies.