iframe code in category product

Resolved Hugo_Es
(@hgo44)

3 years, 3 months ago

Hello everyone,

I would like to embed a youtube video in product category pages.

The iframe code copied from Youtube and pasted in the product category disappears on saving the post “update” page.

I consulted several topics on this subject which recommend to add a transmitted code in the file function.php but none seem to work at the moment.

This way of introducing the iframe code is lightweight and customizable by CSS.
Is there any other trick so far to do this?

Thanks for your help.

Hugo

Viewing 3 replies - 1 through 3 (of 3 total)

anastas10s
(@anastas10s)

3 years, 3 months ago

Hi there @hgo44

Thank you for reaching out about this. As I understand, you are looking into creating bespoke product category pages, and would like to include YouTube videos in them also. Correct?

Feel free to check out the YouTube URL embed block. It comes with alignment options, while he advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit. Linked here is the related documentation page, and linked here is a list of all the available embeds.

Please let us know if you have any further questions about this matter, or if we misinterpret your concern in any way. We will be happy to help you further.

Thread Starter Hugo_Es
(@hgo44)

3 years, 3 months ago

Hello Pepe,

Thanks for your reply

Without designing tailor-made, I would simply like to integrate a Youtube video by Iframe into a product category page, which would allow the size and location to be modified.

Unless I am mistaken, we do not have the possibility to edit product categories with the insertion of blocks.

Here is a screenshot of how my editor appears in product categories :

https://snipboard.io/PCVA2D.jpg

maybe something that is disabled that I have to enable to have this?

Thanks for your help 🙂
Saif
(@babylon1999)

3 years, 3 months ago
Hello @hgo44,

You’re correct, archive pages like shop, category and tags are a bit annoying to edit on themes that don’t support the Site Editor.

The alternative would be a combination of hooks and conditional tags to add/remove content from these pages.

Here’s an example which you can customize to your needs.
```
// Replace 1385 with the category ID of yours, you can add this code to your function.php file or use a plugin like CodeSnippets

function my_custom_youtube_video_function() {
  if ( is_product_category( '1385' ) ) {
    echo '<iframe width="560" height="315" src="https://www.youtube.com/embed/jNQXAC9IVRw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>';
  }
}
add_action( 'woocommerce_before_main_content', 'my_custom_youtube_video_function' );
```
On the other hand, you can create a new template for each category page in the Site Editor with a full drag-and-drop experience from Site Editor > All templates > + > Product by category > Category.

Link to image: https://d.pr/i/OgKLNF

Hope this helps!