Audio preview on product gallery pages

[musikapublishing]

Hi, is there a way to get an audio preview to show on the product gallery and vendor store pages? I am able to do this on woocommerce pages by using the short description field on a product, however on Marketplace pages, the whole filepath shows as text, rather than the media player. Is there any way to make the media player show on marketplace store pages? Or another work around? For music related pages this would be a valuable feature as it would mean that customers don’t need to go to the single product page to hear an audio preview, they can listen to the preview before deciding whether to click through to the single product page to view the rest of the product information.

The picture attached shows an example of a page where I’d like to be able to show an audio preview (e.g. with a media player icon).

Attachments:

You must be logged in to view attached files.

[Sarmistha Chakraborty]

Hello,

Actually the product tab’s products will display same as WooCommerce shop page template. Can you check once your WooCommerce shop page have the “audio preview ” option? If no, please contact with your theme support how to show “audio preview ” in WooCommerce shop page template. It will reflect Vendor store page also.

Thanks.

[musikapublishing]

Actually it doesn’t display the same. On a normal page it displays as a media player. On vendor pages it shows the file path for the media file instead.

[Sarmistha Chakraborty]

Hello,

In your previous screenshot we don’t find the “file path”, Can you share us the two page(WooCommerce Shop page and Vendor Store page) url? Where product block display differently.

Thanks.

[musikapublishing]

Yes Sure. See attached. If I create a product gallery on a normal page, and adjust settings to show the ‘short description’ field on the ‘shop page’ in the ‘appearance’ settings, it displays the media player (which is embedded in this short description product field. But on the vendor pages it shows the file path instead of the media player.

Attachments:

You must be logged in to view attached files.

[Sarmistha Chakraborty]

Hello,

We have just checked your site, It seems like your theme override some WooCommerce default functions.
Try this code in your theme’s functions.php-

add_action( 'woocommerce_after_shop_loop_item', 'custom_wcfm_excerpt_in_product_archives', 7 );
function custom_wcfm_excerpt_in_product_archives() {
    global $post;
    
		$short_description = apply_filters( 'woocommerce_short_description', $post->post_excerpt );

		if ( ! $short_description ) {
			return;
		}

		echo $short_description; // WPCS: XSS ok. 
	
	     
}

And reset this settings – “adjust settings to show the ‘short description’ field on the ‘shop page’ in the ‘appearance’ settings”

Thanks.

[musikapublishing]

Thank you, I will try this.
Would you recommence that I change my theme, if it causing issues? I am using Shop Zita. Is there a theme/s that would be more compatible with WCFM Marketplace?
Thank you for your help, it is appreciated.

[musikapublishing]

Hi again,

I tried adding the code to the theme’s function. It seems to have duplicated the short description field, so that the media shows twice on standard pages, and now shows in addition to the file path on vendor pages. Images attached. Is there a way to adjust the code to fix this?
Thanks again for all your help.

Attachments:

You must be logged in to view attached files.

[Sarmistha Chakraborty]

Hello,

Remove the previous code which we have shared with you,
and add this code in your theme’s functions.php –

function zita_woo_shop_product_short_description() {
        ?>
        <?php if ( has_excerpt() ) { ?>
        <div class="zta-woo-shop-product-description">
           
            <?php echo apply_filters( 'woocommerce_short_description', get_the_excerpt() ); ?>
        </div>
    <?php } ?>
        <?php
    }

Let us know it’s working or not.

Thanks.

[musikapublishing]

Hi, I think what has happened as the code you provided add the short description field information to everywhere a product is displayed across the site, without me having to activate this setting… as when I deactivate this in the theme customization, the short product information still shows (and works properly on every page), and when I activate it, it shows twice.
So if I leave it deactivated in theme customization settings it seems to work.
So should I leave the original code?
Thank you 🙂

[Sarmistha Chakraborty]

Hello,

There is two way –
1.
Keep the previously mentioned(#128400) code, and deactivated in theme customization settings regarding “Short description”

OR

2.remove the previously mentioned(#128400) code, and keep customization settings regarding “Short description” and add below code

function zita_woo_shop_product_short_description() {
        ?>
        <?php if ( has_excerpt() ) { ?>
        <div class="zta-woo-shop-product-description">
           
            <?php echo apply_filters( 'woocommerce_short_description', get_the_excerpt() ); ?>
        </div>
    <?php } ?>
        <?php
    }

Thanks.

[musikapublishing]

Also, is there any way to change the appearance of the media player? I.e. to make it more compact? (Like a play button, rather than a long horizontal slider)? Or is this a theme related issue? Thank you 🙂

[Sarmistha Chakraborty]

It’s totally theme customization, not depending on our WCFM plugins. Please contact with there theme support. Definitely they will help you.

Thanks.

[Author]

Posts