WooCommerce : Plantilla para mostrar el detalle del producto

Fecha Publicación:       26 de Octubre de 2022
Fecha Modificación:       26 de Abril de 2024

Si has creado tu propio tema y deseas mostrar el detalle del producto en WooCommerce ,  sino lo has configurado correctamente usara la plantilla single.php de WordPress,  si esta plantilla no la tienes creada al hacer clic en la lista de productos se mostrara el archivo index.php y no mostrara el detalle del producto.

Configurar WooCommerce  para que use en tu tema personalizada el archivo single-product.php y deje de usar single.php de WordPress

Declarar la compatibilidad con WooCommerce

→  Ir a nuestro tutorial  WooCommerce : Declarar compatibilidad para nuestros temas

Para que nuestro tema personalizado use los archivos de WooCommerce en vez del archivo single.php de wordPress ,   devemos agregar el siguiente codigo en el archivo functions.php

function mytheme_add_woocommerce_support() {
    //compatibilidad woocommerce
     add_theme_support( 'woocommerce' );

     //compatibilidad galeria woocommerce
    add_theme_support( 'wc-product-gallery-zoom' );
    add_theme_support( 'wc-product-gallery-lightbox' );
    add_theme_support( 'wc-product-gallery-slider' );
    }

    add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );

Usar single-product.php de WooCommerce para mostrar el detalle del producto 

Una vez que se a declarado la compatibilidad con WooCommerce para anular el archivo single.php de WordPress ,  ya WooCommerce usara su archivo single-product.php que se encuentra en la carpeta :

wp-content/plugins/woocommerce/templates/  

Si deseamos personalizar el archivo single-product.php , debemos  crear una carpeta de WooCommerce en nuestro tema y copiar single-product.php en ella. Entonces el directorio sería: 

yourtheme/woocommerce/templates/single-product.php.

Una vez hecho esto ya mostrara el detalle del producto en el archivo single-product.php y ya no usara el archivo  single.php de WordPress.

Articulo : 1109 - Veces Leidas
Compartir Articulo:

Artículos Relacionados

×

¡Apóyame suscribiéndote a mi canal!

Tutoriales sobre Diseño Web