{"id":13796,"date":"2026-05-20T09:52:41","date_gmt":"2026-05-20T07:52:41","guid":{"rendered":"https:\/\/elementorprobarato.com\/?p=13796"},"modified":"2026-06-30T14:39:22","modified_gmt":"2026-06-30T12:39:22","slug":"sustituir-la-imagen-de-producto-por-un-video-en-woocommerce","status":"publish","type":"post","link":"https:\/\/elementorprobarato.com\/en\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\/","title":{"rendered":"Sustituir la imagen de producto por un v\u00eddeo en Woocommerce"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Sustituir\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

\u00bfQu\u00e9 vamos a ver?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

En este tutorial veremos como sustituir la imagen de producto de WooCommerce por un v\u00eddeo, tanto en la propia p\u00e1gina de producto como en la p\u00e1gina de la tienda, es decir, en el archive.<\/p>

En este \u00faltimo, ya que no necesitamos el audio, haremos que el v\u00eddeo tenga autoplay.<\/p>

Lo mejor de todo es que no hace falta que el v\u00eddeo est\u00e9 alojado en nuestra web, lo haremos con enlaces a v\u00eddeos subidos a YouTube y asi mejoraremos la carga de la web.<\/p>

Vamos a ver varias opciones para conseguir esto sin necesidad de plugins, s\u00f3lo con fragmentos de c\u00f3digo a\u00f1adidos a Code Snippets o al archivo functions de tu web (esto \u00faltimo no te lo aconsejo).<\/p>

Para crear el campo personalizado donde indicaremos la URL del v\u00eddeo a mostrar, simplemente usaremos un fragmento de c\u00f3digo que tambi\u00e9n de dejar\u00e9.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t

Crear el Snippet que crear\u00e1 el campo \"URL del v\u00eddeo\"<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Copia y pega este fragmento de c\u00f3digo en un nuevo Snippet de Code Snippets:<\/p>\n

Si no tienes instalado el plugin Code Snippets<\/strong><\/a>, hazlo ya ,te explico como se usa aqu\u00ed<\/strong><\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\/**\r\n * Campo personalizado:\r\n * URL v\u00eddeo del producto\r\n *\/\r\n\r\nadd_action( 'woocommerce_product_options_general_product_data', 'ayra_campo_video_producto' );\r\n\r\nfunction ayra_campo_video_producto() {\r\n\r\n    woocommerce_wp_text_input( array(\r\n        'id'          => '_video_producto',\r\n        'label'       => 'V\u00eddeo del producto',\r\n        'placeholder' => 'https:\/\/youtube.com\/...',\r\n        'desc_tip'    => true,\r\n        'description' => 'Introduce la URL del v\u00eddeo de YouTube.'\r\n    ) );\r\n}\r\n\r\n\r\n\/**\r\n * Guardar campo personalizado\r\n *\/\r\n\r\nadd_action( 'woocommerce_process_product_meta', 'ayra_guardar_video_producto' );\r\n\r\nfunction ayra_guardar_video_producto( $post_id ) {\r\n\r\n    if ( isset( $_POST['_video_producto'] ) ) {\r\n\r\n        update_post_meta(\r\n            $post_id,\r\n            '_video_producto',\r\n            esc_url_raw( $_POST['_video_producto'] )\r\n        );\r\n    }\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44b666f elementor-widget elementor-widget-text-editor\" data-id=\"44b666f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Ahora ver\u00e1s que todos los productos (nuevos y creados) tienen un campo nuevo llamado <strong>v\u00eddeo del producto<\/strong> en la primera pesta\u00f1a (cerca de donde ponemos el precio).<\/p><p>Ah\u00ed deber\u00e1s indicar la URL del video subido a YouTube.<\/p><p>De momento ya hemos indicado la URL pero ahora nos falta conseguir que aparezca en la p\u00e1gina del producto y tambi\u00e9n en la de la tienda, es decir, en el grid donde aparecen todos los productos.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-687ecfd elementor-widget elementor-widget-heading\" data-id=\"687ecfd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Snippet para la p\u00e1gina de producto \u00fanico<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-29eb5cd elementor-widget elementor-widget-text-editor\" data-id=\"29eb5cd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>He de decir que para mostrar un v\u00eddeo en lugar de la imagen de producto, la p\u00e1gina de producto (la single) debe estar construida con el maquetador de temas de elementor Pro, ya que tendremos que sustituir el widget de \u00abImagen de producto\u00bb por un shortcode.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-167ad9a elementor-widget elementor-widget-code-highlight\" data-id=\"167ad9a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>function ayra_media_principal_producto() {\r\n    global $product;\r\n\r\n    if ( ! $product ) {\r\n        $product = wc_get_product( get_the_ID() );\r\n    }\r\n\r\n    if ( ! $product ) {\r\n        return '';\r\n    }\r\n\r\n    $product_id  = $product->get_id();\r\n    $video_url   = get_post_meta( $product_id, '_video_producto', true );\r\n    $featured_id = $product->get_image_id();\r\n    $gallery_ids = $product->get_gallery_image_ids();\r\n\r\n    $items = array();\r\n\r\n    \/\/ A\u00f1adir v\u00eddeo si existe\r\n    if ( ! empty( $video_url ) ) {\r\n        $items[] = array(\r\n            'type'  => 'video',\r\n            'embed' => wp_oembed_get( $video_url ),\r\n            'thumb' => '',\r\n        );\r\n    }\r\n\r\n    \/\/ Imagen destacada\r\n    if ( $featured_id ) {\r\n        $items[] = array(\r\n            'type'  => 'image',\r\n            'html'  => wp_get_attachment_image( $featured_id, 'large' ),\r\n            'thumb' => wp_get_attachment_image_url( $featured_id, 'thumbnail' ),\r\n        );\r\n    }\r\n\r\n    \/\/ Galer\u00eda del producto\r\n    foreach ( $gallery_ids as $image_id ) {\r\n        $items[] = array(\r\n            'type'  => 'image',\r\n            'html'  => wp_get_attachment_image( $image_id, 'large' ),\r\n            'thumb' => wp_get_attachment_image_url( $image_id, 'thumbnail' ),\r\n        );\r\n    }\r\n\r\n    if ( empty( $items ) ) {\r\n        return '';\r\n    }\r\n\r\n    ob_start();\r\n    ?>\r\n\r\n    <div class=\"producto-media-gallery\">\r\n\r\n        <div class=\"producto-media-main\">\r\n            <?php echo $items[0]['type'] === 'video' ? $items[0]['embed'] : $items[0]['html']; ?>\r\n        <\/div>\r\n\r\n        <?php if ( count( $items ) > 1 ) : ?>\r\n\r\n            <div class=\"producto-media-thumbs\">\r\n\r\n                <?php foreach ( $items as $index => $item ) : ?>\r\n\r\n                    <button class=\"producto-media-thumb <?php echo $index === 0 ? 'active' : ''; ?>\"\r\n                            type=\"button\"\r\n                            data-content=\"<?php echo esc_attr( $item['type'] === 'video' ? $item['embed'] : $item['html'] ); ?>\">\r\n\r\n                        <?php if ( $item['type'] === 'video' ) : ?>\r\n\r\n                            <div class=\"producto-video-thumb\">\r\n                                <span class=\"producto-video-icon\">\u25b6<\/span>\r\n                            <\/div>\r\n\r\n                        <?php elseif ( ! empty( $item['thumb'] ) ) : ?>\r\n\r\n                            <img decoding=\"async\" src=\"<?php echo esc_url( $item['thumb'] ); ?>\" alt=\"\">\r\n\r\n                        <?php endif; ?>\r\n\r\n                    <\/button>\r\n\r\n                <?php endforeach; ?>\r\n\r\n            <\/div>\r\n\r\n        <?php endif; ?>\r\n\r\n    <\/div>\r\n\r\n    <script>\r\n    document.addEventListener('click', function(e) {\r\n\r\n        const thumb = e.target.closest('.producto-media-thumb');\r\n\r\n        if (!thumb) return;\r\n\r\n        const gallery = thumb.closest('.producto-media-gallery');\r\n        const main = gallery.querySelector('.producto-media-main');\r\n\r\n        main.innerHTML = thumb.dataset.content;\r\n\r\n        gallery.querySelectorAll('.producto-media-thumb').forEach(btn => {\r\n            btn.classList.remove('active');\r\n        });\r\n\r\n        thumb.classList.add('active');\r\n\r\n    });\r\n    <\/script>\r\n\r\n    <?php\r\n    return ob_get_clean();\r\n}\r\n\r\nadd_shortcode( 'media_principal_producto', 'ayra_media_principal_producto' );<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-315f65d elementor-widget elementor-widget-text-editor\" data-id=\"315f65d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>El shortcode que hemos de poner en lugar del <strong>widget<\/strong> de imagen de producto es:<\/p><p><b>[media_principal_producto]<\/b><\/p><p>Tambi\u00e9n vamos a a\u00f1adir algo de CSS para poder controlar un poco el aspecto de esta imagen de producto y su galer\u00eda.<\/p><p>Aqu\u00ed te dejo el CSS que has de pegar, puedes hacerlo en el propio widget de shortcode, en Avanzado, ir a CSS personalizado y pegarlo.<\/p><p>Luego si quieres, podr\u00e1s modificar aspectos como el tama\u00f1o de las miniaturas, la separaci\u00f3n, bordes&#8230;<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-271b7c8 elementor-widget elementor-widget-code-highlight\" data-id=\"271b7c8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>.producto-media-main iframe,\r\n.producto-media-main img {\r\n    width: 100%;\r\n    display: block;\r\n}\r\n\r\n.producto-media-main iframe {\r\n    aspect-ratio: 16 \/ 9;\r\n    height: auto;\r\n}\r\n\r\n.producto-media-thumbs {\r\n    display: flex;\r\n    gap: 2px;\r\n    margin-top: 6px;\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n}\r\n\r\n.producto-media-thumb {\r\n    position: relative;\r\n    width: 18%;\r\n    aspect-ratio: 1 \/ 1;\r\n    padding: 0;\r\n    border: 1px solid #ddd;\r\n    border-radius: 0 !important;\r\n    background: transparent;\r\n    cursor: pointer;\r\n    overflow: hidden;\r\n}\r\n\r\n.producto-media-thumb img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n}\r\n\r\n.producto-media-thumb.active {\r\n    border-color: #111;\r\n}\r\n\r\n.producto-video-thumb {\r\n    width: 100%;\r\n    height: 100%;\r\n    background: #111;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.producto-video-icon {\r\n    position: absolute;\r\n    inset: 0;\r\n    display: grid;\r\n    place-items: center;\r\n    color: #fff;\r\n    background: rgba(0,0,0,0.35);\r\n    font-size: 30px;\r\n    line-height: 1;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-22e4c2a elementor-widget elementor-widget-heading\" data-id=\"22e4c2a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">El Snippet para la p\u00e1gina de la tienda<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2db70a2 elementor-widget elementor-widget-text-editor\" data-id=\"2db70a2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>\u00a0<\/p><p>Ya tenemos la p\u00e1gina de producto con su correspondiente v\u00eddeo (si lo hemos puesto) pero en la p\u00e1gina de la tienda sigue apareciendo la imagen principal del producto.<\/p><p>L\u00f3gicamente, tal como hemos hacho antes, la p\u00e1gina que muestra los productos de la tienda (el archive de productos) tambi\u00e9n ha de estar construida con el maquetador de temas de elementor, y donde antes ten\u00edamos el widget de imagen de producto en el listing item, ahora debemos poner otro shortcode que lo sustituye.<\/p><p>En este caso, vamos a hacer que el item de producto se reproduzca solo y as\u00ed darle a la p\u00e1gina de la tienda un aspecto mas din\u00e1mico.<\/p><p>Crea un nuevo snippet, pon el t\u00edtulo que quieras, y pega este fragmento:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-56c4eeb elementor-widget elementor-widget-code-highlight\" data-id=\"56c4eeb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-php line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-php\">\n\t\t\t\t\t<xmp>function ayra_video_o_imagen_loop_producto() {\r\n\r\n    global $product;\r\n\r\n    if ( ! $product ) {\r\n        $product = wc_get_product( get_the_ID() );\r\n    }\r\n\r\n    if ( ! $product ) {\r\n        return '';\r\n    }\r\n\r\n    $product_id  = $product->get_id();\r\n    $product_url = get_permalink( $product_id );\r\n\r\n    \/\/ Obtener URL del v\u00eddeo sin ACF\r\n    $video_url = get_post_meta( $product_id, '_video_producto', true );\r\n\r\n    \/\/ Si hay v\u00eddeo de YouTube\r\n    if ( ! empty( $video_url ) ) {\r\n\r\n        preg_match(\r\n            '\/(?:youtube\\.com\\\/watch\\?v=|youtu\\.be\\\/|youtube\\.com\\\/embed\\\/)([^&\\?\\\/]+)\/',\r\n            $video_url,\r\n            $matches\r\n        );\r\n\r\n        if ( ! empty( $matches[1] ) ) {\r\n\r\n            $video_id = $matches[1];\r\n\r\n            return '\r\n            <a href=\"' . esc_url( $product_url ) . '\" class=\"producto-loop-link\">\r\n                <div class=\"producto-loop-video\">\r\n                    <iframe\r\n                        src=\"https:\/\/www.youtube.com\/embed\/' . esc_attr( $video_id ) . '?autoplay=1&mute=1&loop=1&playlist=' . esc_attr( $video_id ) . '&controls=0&modestbranding=1&rel=0&playsinline=1\"\r\n                        frameborder=\"0\"\r\n                        allow=\"autoplay; encrypted-media\"\r\n                        allowfullscreen>\r\n                    <\/iframe>\r\n                <\/div>\r\n            <\/a>';\r\n        }\r\n    }\r\n\r\n    \/\/ Si no hay v\u00eddeo \u2192 imagen destacada\r\n    return '\r\n    <a href=\"' . esc_url( $product_url ) . '\" class=\"producto-loop-link\">\r\n        <div class=\"producto-loop-imagen\">\r\n            ' . get_the_post_thumbnail( $product_id, 'large' ) . '\r\n        <\/div>\r\n    <\/a>';\r\n}\r\n\r\nadd_shortcode( 'media_loop_producto', 'ayra_video_o_imagen_loop_producto' );<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-be91a53 elementor-widget elementor-widget-text-editor\" data-id=\"be91a53\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Ahora debes ir al maquetador de temas, y sustituir del item de producto, el widget de imagen de producto por el shortcode <strong>[media_loop_producto]<\/strong><\/p><p>Y en ese mismo widget de shortcode, en avanzado \/ CSS Personalizado pegaremos el siguiente c\u00f3digo:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-12648f8 elementor-widget elementor-widget-code-highlight\" data-id=\"12648f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>.producto-loop-link {\r\n    display: block;\r\n    text-decoration: none;\r\n    color: inherit;\r\n}\r\n\r\n.producto-loop-video,\r\n.producto-loop-imagen {\r\n    width: 100%;\r\n    aspect-ratio: 1 \/ 1;\r\n    overflow: hidden;\r\n    position: relative;\r\n}\r\n\r\n.producto-loop-video iframe {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    width: 178%;\r\n    height: 100%;\r\n    transform: translate(-50%, -50%);\r\n    pointer-events: none;\r\n}\r\n\r\n.producto-loop-imagen img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    display: block;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-40ffdbb elementor-widget elementor-widget-text-editor\" data-id=\"40ffdbb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Ahora tanto en la p\u00e1gina de la tienda, como en el propio producto, aparecer\u00e1 un v\u00eddeo que se reproduce solo, en sustituci\u00f3n de la imagen destacada.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u00bfQu\u00e9 vamos a ver? En este tutorial veremos como sustituir la imagen de producto de WooCommerce por un v\u00eddeo, tanto en la propia p\u00e1gina de producto como en la p\u00e1gina de la tienda, es decir, en el archive. En este \u00faltimo, ya que no necesitamos el audio, haremos que el v\u00eddeo tenga autoplay. Lo mejor [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":13976,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[50],"tags":[],"class_list":["post-13796","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Sustituir la imagen de producto por un v\u00eddeo en Woocommerce - elementor Pro Barato<\/title>\n<meta name=\"description\" content=\"Sustituir la imagen de producto por un v\u00eddeo en Woocommerce, sin plugins y en 5 minutos, te dejo el fragmento de c\u00f3digo para que lo pegues.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementorprobarato.com\/en\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sustituir la imagen de producto por un v\u00eddeo en Woocommerce - elementor Pro Barato\" \/>\n<meta property=\"og:description\" content=\"Sustituir la imagen de producto por un v\u00eddeo en Woocommerce, sin plugins y en 5 minutos, te dejo el fragmento de c\u00f3digo para que lo pegues.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementorprobarato.com\/en\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\/\" \/>\n<meta property=\"og:site_name\" content=\"elementor Pro Barato\" \/>\n<meta property=\"article:published_time\" content=\"2026-05-20T07:52:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-30T12:39:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementorprobarato.com\/wp-content\/uploads\/2026\/05\/Sustituir-la-imagen-de-producto-por-un-video-1024x420-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"420\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"estebanip\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"estebanip\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\\\/\"},\"author\":{\"name\":\"estebanip\",\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/#\\\/schema\\\/person\\\/2260d3b96091792b81b752fecfc09b84\"},\"headline\":\"Sustituir la imagen de producto por un v\u00eddeo en Woocommerce\",\"datePublished\":\"2026-05-20T07:52:41+00:00\",\"dateModified\":\"2026-06-30T12:39:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\\\/\"},\"wordCount\":640,\"publisher\":{\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementorprobarato.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Sustituir-la-imagen-de-producto-por-un-video-1024x420-2.png\",\"articleSection\":[\"Elementor\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\\\/\",\"url\":\"https:\\\/\\\/elementorprobarato.com\\\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\\\/\",\"name\":\"Sustituir la imagen de producto por un v\u00eddeo en Woocommerce - elementor Pro Barato\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementorprobarato.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Sustituir-la-imagen-de-producto-por-un-video-1024x420-2.png\",\"datePublished\":\"2026-05-20T07:52:41+00:00\",\"dateModified\":\"2026-06-30T12:39:22+00:00\",\"description\":\"Sustituir la imagen de producto por un v\u00eddeo en Woocommerce, sin plugins y en 5 minutos, te dejo el fragmento de c\u00f3digo para que lo pegues.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elementorprobarato.com\\\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\\\/#primaryimage\",\"url\":\"https:\\\/\\\/elementorprobarato.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Sustituir-la-imagen-de-producto-por-un-video-1024x420-2.png\",\"contentUrl\":\"https:\\\/\\\/elementorprobarato.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Sustituir-la-imagen-de-producto-por-un-video-1024x420-2.png\",\"width\":1024,\"height\":420,\"caption\":\"Sustituir la imagen de producto por un v\u00eddeo en Woocommerce\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/elementorprobarato.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sustituir la imagen de producto por un v\u00eddeo en Woocommerce\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/#website\",\"url\":\"https:\\\/\\\/elementorprobarato.com\\\/\",\"name\":\"elementorprobarato.com\",\"description\":\"100% Original y con clave del fabricante\",\"publisher\":{\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/#organization\"},\"alternateName\":\"Accede a todas las funciones de elementor Pro con licencia oficial pero mucho mas barato\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elementorprobarato.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/#organization\",\"name\":\"elementorprobarato.com\",\"alternateName\":\"Accede a todas las funciones de elementor Pro con licencia oficial pero mucho mas barato\",\"url\":\"https:\\\/\\\/elementorprobarato.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/elementorprobarato.com\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/cropped-Elementor-Logo-nuevo-rosa.png\",\"contentUrl\":\"https:\\\/\\\/elementorprobarato.com\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/cropped-Elementor-Logo-nuevo-rosa.png\",\"width\":512,\"height\":512,\"caption\":\"elementorprobarato.com\"},\"image\":{\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/tiktok.com\\\/@lapeorempresadelmundo\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/elementorprobarato.com\\\/#\\\/schema\\\/person\\\/2260d3b96091792b81b752fecfc09b84\",\"name\":\"estebanip\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9df27800b983d072192e4ca5478612f2b535c0fd51c3cae5d6628b127eb3c34d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9df27800b983d072192e4ca5478612f2b535c0fd51c3cae5d6628b127eb3c34d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9df27800b983d072192e4ca5478612f2b535c0fd51c3cae5d6628b127eb3c34d?s=96&d=mm&r=g\",\"caption\":\"estebanip\"},\"sameAs\":[\"https:\\\/\\\/elementorprobarato.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sustituir la imagen de producto por un v\u00eddeo en Woocommerce - elementor Pro Barato","description":"Sustituir la imagen de producto por un v\u00eddeo en Woocommerce, sin plugins y en 5 minutos, te dejo el fragmento de c\u00f3digo para que lo pegues.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementorprobarato.com\/en\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\/","og_locale":"en_US","og_type":"article","og_title":"Sustituir la imagen de producto por un v\u00eddeo en Woocommerce - elementor Pro Barato","og_description":"Sustituir la imagen de producto por un v\u00eddeo en Woocommerce, sin plugins y en 5 minutos, te dejo el fragmento de c\u00f3digo para que lo pegues.","og_url":"https:\/\/elementorprobarato.com\/en\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\/","og_site_name":"elementor Pro Barato","article_published_time":"2026-05-20T07:52:41+00:00","article_modified_time":"2026-06-30T12:39:22+00:00","og_image":[{"width":1024,"height":420,"url":"https:\/\/elementorprobarato.com\/wp-content\/uploads\/2026\/05\/Sustituir-la-imagen-de-producto-por-un-video-1024x420-2.png","type":"image\/png"}],"author":"estebanip","twitter_card":"summary_large_image","twitter_misc":{"Written by":"estebanip","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/elementorprobarato.com\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\/#article","isPartOf":{"@id":"https:\/\/elementorprobarato.com\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\/"},"author":{"name":"estebanip","@id":"https:\/\/elementorprobarato.com\/#\/schema\/person\/2260d3b96091792b81b752fecfc09b84"},"headline":"Sustituir la imagen de producto por un v\u00eddeo en Woocommerce","datePublished":"2026-05-20T07:52:41+00:00","dateModified":"2026-06-30T12:39:22+00:00","mainEntityOfPage":{"@id":"https:\/\/elementorprobarato.com\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\/"},"wordCount":640,"publisher":{"@id":"https:\/\/elementorprobarato.com\/#organization"},"image":{"@id":"https:\/\/elementorprobarato.com\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/elementorprobarato.com\/wp-content\/uploads\/2026\/05\/Sustituir-la-imagen-de-producto-por-un-video-1024x420-2.png","articleSection":["Elementor"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementorprobarato.com\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\/","url":"https:\/\/elementorprobarato.com\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\/","name":"Sustituir la imagen de producto por un v\u00eddeo en Woocommerce - elementor Pro Barato","isPartOf":{"@id":"https:\/\/elementorprobarato.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementorprobarato.com\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\/#primaryimage"},"image":{"@id":"https:\/\/elementorprobarato.com\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/elementorprobarato.com\/wp-content\/uploads\/2026\/05\/Sustituir-la-imagen-de-producto-por-un-video-1024x420-2.png","datePublished":"2026-05-20T07:52:41+00:00","dateModified":"2026-06-30T12:39:22+00:00","description":"Sustituir la imagen de producto por un v\u00eddeo en Woocommerce, sin plugins y en 5 minutos, te dejo el fragmento de c\u00f3digo para que lo pegues.","breadcrumb":{"@id":"https:\/\/elementorprobarato.com\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementorprobarato.com\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementorprobarato.com\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\/#primaryimage","url":"https:\/\/elementorprobarato.com\/wp-content\/uploads\/2026\/05\/Sustituir-la-imagen-de-producto-por-un-video-1024x420-2.png","contentUrl":"https:\/\/elementorprobarato.com\/wp-content\/uploads\/2026\/05\/Sustituir-la-imagen-de-producto-por-un-video-1024x420-2.png","width":1024,"height":420,"caption":"Sustituir la imagen de producto por un v\u00eddeo en Woocommerce"},{"@type":"BreadcrumbList","@id":"https:\/\/elementorprobarato.com\/sustituir-la-imagen-de-producto-por-un-video-en-woocommerce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/elementorprobarato.com\/"},{"@type":"ListItem","position":2,"name":"Sustituir la imagen de producto por un v\u00eddeo en Woocommerce"}]},{"@type":"WebSite","@id":"https:\/\/elementorprobarato.com\/#website","url":"https:\/\/elementorprobarato.com\/","name":"elementorprobarato.com","description":"100% Original y con clave del fabricante","publisher":{"@id":"https:\/\/elementorprobarato.com\/#organization"},"alternateName":"Accede a todas las funciones de elementor Pro con licencia oficial pero mucho mas barato","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementorprobarato.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementorprobarato.com\/#organization","name":"elementorprobarato.com","alternateName":"Accede a todas las funciones de elementor Pro con licencia oficial pero mucho mas barato","url":"https:\/\/elementorprobarato.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementorprobarato.com\/#\/schema\/logo\/image\/","url":"https:\/\/elementorprobarato.com\/wp-content\/uploads\/2023\/10\/cropped-Elementor-Logo-nuevo-rosa.png","contentUrl":"https:\/\/elementorprobarato.com\/wp-content\/uploads\/2023\/10\/cropped-Elementor-Logo-nuevo-rosa.png","width":512,"height":512,"caption":"elementorprobarato.com"},"image":{"@id":"https:\/\/elementorprobarato.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/tiktok.com\/@lapeorempresadelmundo"]},{"@type":"Person","@id":"https:\/\/elementorprobarato.com\/#\/schema\/person\/2260d3b96091792b81b752fecfc09b84","name":"estebanip","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/9df27800b983d072192e4ca5478612f2b535c0fd51c3cae5d6628b127eb3c34d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/9df27800b983d072192e4ca5478612f2b535c0fd51c3cae5d6628b127eb3c34d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9df27800b983d072192e4ca5478612f2b535c0fd51c3cae5d6628b127eb3c34d?s=96&d=mm&r=g","caption":"estebanip"},"sameAs":["https:\/\/elementorprobarato.com"]}]}},"_links":{"self":[{"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/posts\/13796","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/comments?post=13796"}],"version-history":[{"count":20,"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/posts\/13796\/revisions"}],"predecessor-version":[{"id":13975,"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/posts\/13796\/revisions\/13975"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/media\/13976"}],"wp:attachment":[{"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/media?parent=13796"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/categories?post=13796"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementorprobarato.com\/en\/wp-json\/wp\/v2\/tags?post=13796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}