Cómo cambiar el diseño de la página de producto en WooCommerce usando un tema hijo

Cómo cambiar el diseño de la página de producto en WooCommerce usando un tema hijo

1. Crear un tema hijo

• Accede a la carpeta de tu tema en wp-content/themes/.
• Crea una nueva carpeta para el tema hijo, por ejemplo, mi-tema-hijo.
• Dentro de la carpeta del tema hijo, crea un archivo style.css y añade lo siguiente:

/*
 Theme Name: Mi Tema Hijo
 Template: nombre-del-tema-padre
*/

• Crea un archivo functions.php en la misma carpeta y añade el siguiente código:

<?php
function mi_tema_hijo_enqueue_styles() {
    wp_enqueue_style('tema-padre', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('tema-hijo', get_stylesheet_directory_uri() . '/style.css', array('tema-padre'));
}
add_action('wp_enqueue_scripts', 'mi_tema_hijo_enqueue_styles');

2. Copiar la plantilla de producto

• Accede a la carpeta de tu tema padre en wp-content/themes/nombre-del-tema-padre/woocommerce/single-product/.
• Copia el archivo content-single-product.php.
• Pega el archivo copiado en la carpeta de tu tema hijo: wp-content/themes/mi-tema-hijo/woocommerce/single-product/.

3. Modificar el diseño

• Abre el archivo content-single-product.php en tu tema hijo.
• Realiza los cambios que desees en el HTML y PHP para personalizar el diseño.

4. Activar el tema hijo

• Ve al panel de administración de WordPress.
• Dirígete a Apariencia > Temas.
• Activa tu tema hijo Mi Tema Hijo.

5. Verificar cambios

• Visita una página de producto para ver los cambios aplicados.

Categoría: Plugin WooCommerce