Cómo personalizar las páginas de productos de WooCommerce

Publicado: 2021-04-15

Personalizar las páginas de productos de WooCommerce ¿Está buscando formas de personalizar las páginas de sus productos? El diseño y la experiencia del usuario de las páginas de sus productos pueden tener un impacto positivo en sus ventas. Estas páginas muestran sus productos de la mejor manera, motivando a los compradores a presionar el botón "Agregar al carrito".

Una buena página de producto debe ser informativa y debe tener un diseño ordenado. Esta página también debe expresar su marca única.

Hay muchas maneras diferentes de personalizar la página de la tienda. Puede usar las opciones integradas, fragmentos de código personalizados y complementos.

Personalizar las páginas de productos de WooCommerce

Las dos páginas principales donde ocurre la mayor parte de la personalización en WooCommerce son la página de la tienda y la página de productos. Necesitas personalizarlos para potenciar tus ventas y optimizar el inicio del proceso de compra.

Recomendamos tener un diseño ordenado que se centre en brindar la mejor experiencia al cliente para mejorar las tasas de conversión.

En esta publicación, compartiremos algunas soluciones para editar la página del producto mediante programación.

Primero, veamos el diseño de la página del producto predeterminado.

Diseño de página de producto de WooCommerce

Así es como se muestra la página del producto: diseño de página

Hay 2 archivos principales de WooCommerce responsables de la salida de la página del producto.

single-product.php: construye la plantilla requerida para el diseño actual
content-single-product.php: Este archivo imprime el contenido en la plantilla

Puede sobrescribir los archivos de plantilla utilizando un tema secundario. También puede usar ganchos de WooCommerce en lugar de sobrescribir archivos de plantilla cuando sea posible. Esta es una de las mejores prácticas recomendadas por WordPress.

Veamos algunos ejemplos prácticos de cómo puedes personalizar la página del producto.

Edite la página del producto de WooCommerce usando ganchos

En esta sección, usaremos ganchos para personalizar la página del producto.

1. Eliminar elementos

Hay varios ganchos para eliminar diferentes elementos en la página de productos. Los ganchos funcionan con elementos específicos.

Esto significa que debe usar el gancho, la función y el valor de prioridad correctos.

Aquí hay algunos scripts para eliminar diferentes elementos y personalizar la página del producto. Cópielo y péguelo en el archivo functions.php:

// remove title

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );

// remove  rating  stars

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );

// remove product meta

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );

// remove  description

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );

// remove images

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

// remove related products

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

// remove additional information tabs

remove_action('woocommerce_after_single_product_summary ','woocommerce_output_product_data_tabs',10);

2.Agregar nuevos elementos

Puede agregar contenido nuevo a la página del producto creando su propia función. Debes copiarlo y pegarlo en el archivo functions.php:

 

add_action('woocommerce_after_single_product_summary','njengah_callback_function'); 

function njengah_callback_function(){    
    printf('     
    <h1> Hey there !</h1>  
   <div><h5>Welcome to my custom product page</h5>      
   </div>'); 
}

Este es el resultado: añadir elemento

3. Editar pestañas de productos

Puede usar el gancho de filtro woocommerce_product_tabs para eliminar, agregar, reordenar o agregar una nueva pestaña en la sección Información adicional.

Este es un ejemplo de un script que eliminará la pestaña Descripción y su contenido, cambiará el nombre de la pestaña Reseñas y cambiará la prioridad de Información adicional al primer lugar. Debes copiarlo y pegarlo en el archivo functions.php:

add_filter( 'woocommerce_product_tabs', 'njengah_remove_product_tabs', 98 );

function njengah_remove_product_tabs( $tabs ) {

    unset( $tabs['description'] );           // Remove the Description tab

    $tabs['reviews']['title'] = __( 'Ratings' );     // Rename the Reviews tab

    $tabs['additional_information']['priority'] = 5;       // Additional information at first

    return $tabs;

}

Este es el resultado: editar pestañas de productos

Puede crear una nueva pestaña utilizando el siguiente código. Debes copiarlo y pegarlo en el archivo functions.php:

 

add_filter( 'woocommerce_product_tabs', 'njengah_new_product_tab' );

function njengah_new_product_tab( $tabs ) {         

            // Adds the new tab   

            $tabs['test_tab'] = array(

                        'title'    => __( 'New Tab Here!', 'woocommerce' ),

                        'priority'  => 50,

                        'callback'  => 'njengah_new_product_tab_content'

            );

            return $tabs;

}

function njengah_new_product_tab_content() {

            echo '<h2>New Tab Here!</h2><p>Here\'s your new product tab content</p>.';

}

Este es el resultado: nueva pestaña

Personalice la página del producto reemplazando los archivos de plantilla de WooCommerce

También puede editar la página del producto de WooCommerce mediante programación anulando los archivos de plantilla.

Sin embargo, es importante señalar que este método es más arriesgado que el anterior. Por lo tanto, le recomendamos que cree una copia de seguridad completa de su sitio antes de continuar.

Este proceso es similar a anular cualquier otro archivo en su tema hijo.

Recomendamos crear un tema secundario o un complemento para realizar los cambios.

1. Edite la metainformación

En esta sección, editaremos la metainformación. Esto quiere decir que tenemos al archivo template encargado de imprimir los datos correspondientes. Es el archivo meta.php.

Este archivo se encuentra en el complemento WooCommerce siguiendo esta ruta: woocommerce/templates/single-product/meta.php.

El siguiente paso es editar el directorio de archivos de temas secundarios y crear una carpeta de WooCommerce.

Cree otra carpeta dentro llamada single-product y pegue el archivo meta.php: Child_theme/woocommerce/single-product/meta.php

Esto le permitirá editar el archivo meta.php y ver sus cambios en la interfaz.

El siguiente archivo de muestra meta.php:

Cambiar la etiqueta de SKU a ID
Cambie las etiquetas a Publicado en
Eliminar la etiqueta de categoría

global $product;
?>

<div class="product_meta">

            <?php do_action( 'woocommerce_product_meta_start' ); ?>

            <?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>

                        <span class="sku_wrapper"><?php esc_html_e( 'ID:', 'woocommerce' ); ?>

                                    <span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?>

                                    </span>

                        </span>

            <?php endif; ?>

            <?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( '', '', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>

            <?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Published under:', 'Published under:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>

            <?php do_action( 'woocommerce_product_meta_end' ); ?>

</div>

Este es el resultado: cambiar meta descripción

2. Personaliza la página del producto con CSS Script

Puede editar fácilmente la página del producto de WooCommerce mediante programación utilizando el código CSS.

Le ayudará a diseñar la página del producto y le dará la apariencia de su negocio.

Lo primero que debe hacer es crear un nuevo archivo en su tema secundario con la extensión .css para que pueda agregar sus scripts CSS allí. Puede nombrarlo single-product.css.

Coloque el archivo en la carpeta principal del tema secundario al mismo nivel que los archivos functions.php y style.css.

Pegue el siguiente script en el archivo functions.php de su tema secundario y reemplace el nombre de su archivo CSS si es necesario.

add_action( 'wp_enqueue_scripts', 'njengah_custom_product_style' );

function njengah_custom_product_style() {

if ( is_product() ){

wp_register_style( 'product_css', get_stylesheet_directory_uri() . '/single-product.css', false, '1.0.0', 'all' );

wp_enqueue_style('product_css');

}

}

El condicional if(is_product()) verificará si la página actual es una página de producto. Esto evita cargar innecesariamente el archivo CSS cuando no es una página de producto.

A estas alturas, debería poder editar el estilo de las páginas de productos utilizando reglas CSS personalizadas.

Conclusión

En esta publicación, hemos compartido algunas de las formas en que puede personalizar la página de su producto. Sin embargo, antes de realizar cualquier cambio, le recomendamos que utilice una herramienta como Hotjar que le proporcione datos sobre cómo los visitantes interactúan con su página.

También puede consultar lo que están haciendo los minoristas en línea como Amazon y Walmart. Puede imitar su apariencia al incluir características comunes.

Si necesita ayuda para personalizar esta página, comuníquese con un desarrollador calificado de WordPress.