Cómo editar la página del producto de WooCommerce mediante programación

Publicado: 2021-01-09

¿Busca formas de personalizar la página del producto en su tienda de comercio electrónico? En esta guía, le mostraremos cómo editar la página del producto de WooCommerce mediante programación .

Personalización de la página del producto

Aunque puede personalizar cualquier cosa en su tienda, las dos páginas principales donde ocurren la mayoría de las personalizaciones en WooCommerce son la página de la tienda y la página de productos. Si quieres impulsar tus ventas y optimizar el inicio del proceso de compra, debes trabajar en ambos. Ya vimos cómo personalizar la página de la tienda, así que hoy le mostraremos cómo editar la página del producto mediante programación (con código).

Un diseño ordenado que se centre en brindar la mejor experiencia al cliente lo ayudará a mejorar el proceso general de compra y aumentar sus tasas de conversión. Hay dos formas principales de personalizar la página del producto:

  • Con complementos
  • Programáticamente

Aunque algunos complementos pueden ayudarlo, encontrar el que tiene todas las funciones que desea puede ser un proceso largo. Entonces, si tiene algunas habilidades básicas de desarrollador, una excelente opción es editar la página del producto de WooCommerce mediante programación . No solo puede evitar la instalación de herramientas de terceros, sino que también tendrá mucha más flexibilidad para personalizar lo que desee.

Si desea personalizar la página del producto con complementos y creadores de páginas, consulte esta guía.

Cómo editar la página del producto de WooCommerce mediante programación

En esta sección, aprenderá a editar la página de productos de WooCommerce para productos individuales. Cubriremos los siguientes temas.

  1. usando ganchos
    1. Quitar elementos
    2. Reordenar elementos
    3. Agregar nuevos elementos
    4. Aplicar lógica condicional
      1. Usuario registrado y rol de usuario
      2. ID de productos y taxonomías
    5. Editar pestañas de productos
    6. Soporte para productos variables
  2. Anular los archivos de plantilla de WooCommerce
    1. Editar la metainformación
    2. Cambiar a una plantilla personalizada para una categoría de producto específica
      1. Edite el archivo single-product.php
      2. Cree un nuevo archivo content-single-product.php
      3. Cree una plantilla personalizada editando su nuevo archivo content-single-product.php
  3. Personalización de la página del producto con scripts CSS

Diseño de página de producto de WooCommerce

Antes de comenzar con el tutorial, echemos un vistazo a la página de producto predeterminada en WooCommerce para productos individuales e identifiquemos cada elemento. Preste atención a las diferentes secciones de la plantilla y cómo se organiza la información porque nos referiremos a ellas más adelante en la guía. Página de un solo producto de WooCommerce Hay dos archivos principales de WooCommerce responsables de la salida de la página del producto.

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

Ambos archivos se pueden sobrescribir usando un tema secundario. Esta es una práctica común para sobrescribir los archivos de plantilla de WooCommerce. Sin embargo, debe intentar usar ganchos de WooCommerce en lugar de sobrescribir archivos de plantilla siempre que sea posible porque es una de las mejores prácticas que recomienda WordPress al personalizar su sitio.

Por otro lado, para tareas complejas que incluyen funciones u objetos, es posible que deba editar los archivos de plantilla. Combinando ambas técnicas, debería poder lograr casi cualquier personalización que desee. Entonces, en este tutorial, le mostraremos cómo editar la página del producto WooCommerce usando ambos métodos.

Antes de comenzar, asegúrese de crear un tema secundario para probar sus scripts o use un complemento para generar uno. Veamos algunos ejemplos prácticos para que aprendas cómo funciona cada una de estas técnicas para sacarle el máximo partido a tu tienda.

1) Edite la página del producto WooCommerce usando ganchos

NOTA : Si no está familiarizado con los ganchos de WooCommerce y cómo usarlos, consulte esta guía.

1.1) Eliminar elementos de páginas de productos individuales

Hay varios ganchos de WooCommerce que puede usar para eliminar cualquier elemento en una sola página de producto. Cada uno de ellos funcionará con un grupo de elementos específicos, por lo que debe usar el gancho derecho, la función de devolución de llamada de WooCommerce correcta y el valor de prioridad correcto.

Por ejemplo, si desea eliminar el título de todas las páginas de productos, utilizará el siguiente script en el archivo functions.php de su tema secundario.

 remove_action(/* hook -> */'woocommerce_single_product_summary', /* callback function ->*/ 'woocommerce_template_single_title', /* position ->*/5 );

Encontrará todos los ganchos y sus parámetros relacionados aquí o en los comentarios en el archivo content-single-product.php del complemento WooCommerce. Ahora, echemos un vistazo a otras secuencias de comandos de muestra para eliminar diferentes elementos y personalizar la página del producto.

 // quitar titulo
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
// eliminar estrellas de calificación
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10);
// eliminar meta del producto 
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40);
// eliminar descripción
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);
// eliminar imagenes
remove_action('woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20);
// eliminar productos relacionados
remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);
// eliminar pestañas de información adicional
remove_action('woocommerce_after_single_product_summary','woocommerce_output_product_data_tabs',10);

1.2) Reordenar elementos

Reordenar los elementos de la página del producto es bastante sencillo. Primero, debe eliminar el gancho de la misma manera que lo hemos hecho antes, y luego debe agregarlo nuevamente con un número de orden/prioridad diferente. Por ejemplo, el siguiente script moverá la descripción del producto justo debajo del título:

 // cambia el orden de la descripción
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6);

Como ves, eliminamos la acción y luego la volvemos a agregar con una prioridad diferente (6 en lugar de 20). ¿Por qué elegimos una prioridad/orden de 6? Sabemos que el elemento de título tiene un valor de prioridad de 5, por lo que esto nos permite conocer el valor de prioridad que debemos asignar a nuestro enlace personalizado para mostrar el elemento de devolución de llamada justo después del título (6).

Usando la información que le proporcionamos en el punto 1.1, puede hacer lo mismo con cualquier gancho y devolución de llamada y colocarlos en el orden que desee.

1.3) Agregar nuevos elementos

Si necesita personalizar la página del producto de WooCommerce agregando contenido nuevo, es posible que deba considerar anular los archivos de plantilla. Sin embargo, también puede usar el siguiente enlace para agregar contenido nuevo:

 add_action('woocommerce_before_single_product_summary',function(){
  printf('<h4><a href="?added-content">¡Felicitaciones, acaba de agregar un enlace!</a></h4>');
}
);

woocommerce_before_single_product_summary gancho personalización de la página del producto Alternativamente, puede crear su propia función:

 add_action('woocommerce_after_single_product_summary','QuadLayers_callback_function');
función QuadLayers_callback_function(){
    imprimirf('
    <h1> ¡Hola!</h1>
    <div><h5>Bienvenido a mi página de productos personalizados</h5>
    <h4><a href="?link-to-somewere">¡Enlace a algún lugar!</a></h4>
    <img src="https://img.freepik.com/vectores-gratis/logotipo-de-silueta-de-pajaro-ilustracion-vectorial_141216-100.jpg" />
    </div>');
}

woocommerce_after_single_product_summary personalización de la página del producto

1.4) Lógica condicional en una sola página de producto

Anteriormente vimos cómo agregar campos condicionales en la página de pago, pero también puede agregarlos a la página del producto. Puede crear lógica condicional para cumplir con los requisitos que desee utilizando cualquiera de las funciones nativas de WordPress. Echemos un vistazo a algunos ejemplos.

1.4.1) Usuario registrado y rol de usuario

user_is_logged_in() es una función predeterminada de WordPress que se utiliza para validar a los visitantes del sitio web. Además, podemos usar la función wp_get_current_user() para recuperar toda la información relacionada con el usuario que inició sesión. En el siguiente script, simplemente estamos agregando algo de contenido en función de si el usuario ha iniciado sesión y su rol, pero puede agregar sus funciones personalizadas para funcionalidades más complejas.

 add_action('woocommerce_before_single_product','QuadLayers_get_user');
función QuadLayers_get_user() {
    if( es_usuario_logged_in() ) {
    $usuario = wp_get_current_user(); 
    printf ('<h1>Hola' .$usuario->usuario_buennombre.'!</h1>');
    $roles = (arreglo) $usuario->roles;
        if($roles[0]=='administrador'){
            echo "<h4><b>Eres $roles[0]</h4></b>";
        }     
    } 
    demás {
    matriz de retorno ();
    }     
}
1.4.2) ID de productos y taxonomías

Del mismo modo, podemos recuperar la identificación del producto y/o las categorías de productos. La diferencia es que vamos a utilizar el objeto global WP $post para obtener el ID y la función get_the_terms() para obtener las categorías de productos.

 add_action('woocommerce_before_single_product','QuadLayers_get_product_taxonomias');
función QuadLayers_get_product_taxonomias(){ 
    publicación global $; 
    $term_obj_list = get_the_terms( $post->ID, 'product_cat' );
    $terms_string = join(', ', wp_list_pluck($term_obj_list, 'name'));
    if($terms_string=='Pósteres'){
        eco "
<h1>Este es uno de nuestros mejores $terms_string</h1>"; echo "<h2>ID del producto: $post->ID"; } }

El script anterior devolverá una sola categoría. Si necesita recuperar varias categorías o etiquetas, deberá crear una función más compleja. Tendrá que recorrer las taxonomías antes de aplicar sus condicionales como se muestra a continuación:

 add_action('woocommerce_before_single_product','QuadLayers_get_multiple_taxonomies');
función QuadLayers_get_multiple_taxonomias(){
    publicación global $;
    $args = array( 'taxonomy' => 'product_tag',);
    $términos = wp_get_post_terms($post->ID,'product_tag', $args);
    $cuenta = cuenta($términos);
 si ($recuento > 0) {
        echo '<div class="custom-content"><h4>Lista de etiquetas:</h4><ul>';
        foreach ($términos como $término) {echo '<li>'.$término->nombre.'</li>';}
        eco "</ul></div>";
    }
}

1.5) Editar pestañas de productos

El gancho de filtro woocommerce_product_tabs nos permite eliminar, agregar, reordenar o agregar una nueva pestaña en la sección Información adicional . La siguiente secuencia de comandos 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.

 add_filter('woocommerce_product_tabs', 'woo_remove_product_tabs', 98);
función woo_remove_product_tabs ($ pestañas) {
    unset( $tabs['descripción'] ); // Elimina la pestaña Descripción
    $tabs['reseñas']['título'] = __( 'Calificaciones'); // Cambiar el nombre de la pestaña Reseñas
    $tabs['información_adicional']['prioridad'] = 5; // Información adicional al principio
    devolver $pestañas;
}

Edite la página del producto de WooCommerce mediante programación - Personalice las pestañas del producto Para editar el contenido de una pestaña, debe usar una función de devolución de llamada como esta:

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

función woo_custom_description_tab ($ pestañas) {
	$tabs['description']['callback'] = 'woo_custom_description_tab_content'; // Devolución de llamada de descripción personalizada
	devolver $pestañas;
}
función woo_custom_description_tab_content() {
	eco '
<h2>Descripción personalizada</h2>
'; echo 'Aquí hay una descripción personalizada'; }

Del mismo modo, podemos crear una nueva pestaña de la siguiente manera:

 add_filter('woocommerce_product_tabs', 'woo_new_product_tab');
función woo_new_product_tab ($ pestañas) {	
	// Agrega la nueva pestaña	
	$tabs['test_tab'] = array(
		'título' => __( 'Pestaña Nuevo producto', 'woocommerce' ),
		'prioridad' => 50,
		'devolución de llamada' => 'woo_new_product_tab_content'
	);
	devolver $pestañas;
}
función woo_new_product_tab_content() {
	echo '<h2>Pestaña de nuevo producto</h2><p>Aquí está el contenido de la pestaña de nuevo producto</p>.'; 
}

En este ejemplo, acabamos de crear una nueva pestaña llamada "Pestaña Nuevo producto". Así es como se ve en la parte delantera.

1.6) Soporte para productos variables

Las variaciones de productos son una característica predeterminada de WooCommerce y puede crear y usar productos variables sin ningún tipo de personalización. Sin embargo, debe seguir las pautas de WooCommerce para que una solución personalizada sea compatible con las variaciones del producto.

Es importante tener en cuenta que cualquier solución personalizada debe integrarse con el sitio web general y no con una sola página. Entonces, teniendo esto en cuenta, todavía podemos usar algunos de los ganchos disponibles relacionados con productos variables. Estos ganchos solo se activarán cuando estén en una página de producto variable.

  • woocommerce_before_variations_form
  • woocommerce_before_single_variation
  • woocommerce_single_variation
  • woocommerce_after_single_variation

2) Personaliza la página del producto anulando los archivos de plantilla de WooCommerce

La segunda alternativa para editar la página del producto de WooCommerce mediante programación es anular los archivos de plantilla. Como este método es un poco más arriesgado que el anterior, le recomendamos que cree una copia de seguridad completa de su sitio antes de comenzar. Si no está seguro de cómo hacerlo, consulte esta guía sobre cómo hacer una copia de seguridad de un sitio de WordPress.

Anular los archivos de plantilla de WooCommerce es similar a anular cualquier otro archivo en su tema secundario, por lo que para evitar perder sus personalizaciones cuando actualice su tema, le recomendamos que cree un tema secundario o use cualquiera de estos complementos si no tiene uno.

2.1) Editar la metainformación

Para editar la metainformación, debemos anular el archivo de plantilla responsable para imprimir los datos correspondientes. El archivo meta.php ubicado en el complemento WooCommerce sigue esta ruta: woocommerce/templates/single-product/meta.php

Ahora edite el directorio de archivos de tema de su hijo y cree una carpeta de WooCommerce. Luego, cree otra carpeta dentro llamada single-product y pegue el archivo meta.php allí: Child_theme/woocommerce/single-product/meta.php

Después de esto, debería poder 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
 $producto global;
?>
<div class="product_meta">

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

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

		<span class="sku_wrapper"><?php esc_html_e( 'ID:', 'woocommerce' ); ?> 
			<span class="sku"><?php echo ( $sku = $producto->get_sku() ) ? $sku: esc_html__('N/A', 'woocommerce'); ?>
			</span>
		</span>
	<?php endif; ?>
	<?php echo wc_get_product_category_list( $producto->get_id(), ', ', '<span class="posted_in">' . _n( '', '', count($producto->get_category_ids() ), 'woocommerce ' ) . ' ', '</span>' ); ?>
	<?php echo wc_get_product_tag_list( $producto->get_id(), ', ', '<span class="tagged_as">' . _n( 'Publicado bajo:', 'Publicado bajo:', count( $producto->get_tag_ids () ), 'woocommerce' ) . ' ', '</span>' ); ?>
	<?php do_action('woocommerce_product_meta_end'); ?>
</div>

2.2) Cambiar a una plantilla personalizada para una categoría de producto específica

Ahora intentemos una tarea más compleja. Anularemos la plantilla de un solo producto solo cuando el producto actual pertenezca a una categoría específica.

2.2.1) Edite el archivo single-product.php

Primero, copie el archivo single-product.php y péguelo en la carpeta de su tema secundario, en el directorio de WooCommerce:

Child_theme/woocommerce/single-product.php

Luego, abra el archivo y verifique la línea 37: wc_get_template_part('content','single-product');

Así es como entra en acción el archivo content-single-product.php , que imprime todos los elementos del producto actual para completar el ciclo y construir el diseño.

Queremos anular este archivo solo cuando el producto pertenezca a la categoría especificada, por lo que eliminaremos la línea 37: wc_get_template_part( 'content', 'single-product' ); y reemplácelo con el siguiente script:

 $términos = wp_get_post_terms( $post->ID, 'product_cat' );
				$categorías = wp_list_pluck( $términos, 'slug');
			
				if (in_array('carteles', $categorias)) {
					wc_get_template_part( 'contenido', 'posters-de-un-producto' );
				} demás {
					wc_get_template_part('contenido', 'producto único');
				}

Tenga en cuenta que estamos usando los productos de muestra proporcionados por WooCommerce, por lo que hay una categoría llamada " Pósteres " que estamos usando para este ejemplo. Simplemente reemplace los " carteles " con una categoría de producto existente de su sitio web.

Recuerda que puedes encontrar el slug de todas tus categorías de productos en el panel principal de WordPress > Productos > Categorías .

2.2.2) Crear un nuevo archivo content-single-product.php

Ahora necesitamos crear un nuevo archivo que anule el predeterminado content-single-product.php . Este archivo tendrá la categoría slug en su nombre.

Eche un vistazo al ejemplo anterior para ver cómo se llama el archivo content-single-product-posters.php . Esto es importante porque el nombre del archivo debe coincidir con el código del paso anterior, por lo que su archivo debe llamarse content-single-product-/*YOURCATEGORYSLUG*/.php .

De esta forma, wc_get_template_part( 'content', 'single-product-YOURCATEGORY' ) activará el archivo content-single-product-YOURCATEGORY.php y anulará el archivo de plantilla predeterminado de WooCommerce.

Simplemente pegue el archivo content-single-product.php predeterminado en la carpeta WooCommerce de su tema hijo, cámbiele el nombre siguiendo las instrucciones explicadas anteriormente y realice algunas ediciones para probarlo.

2.2.3) Cree una plantilla personalizada editando su nuevo archivo content-single-product.php

Esta es una página de producto de muestra que se mostrará solo cuando el producto actual pertenezca a la categoría " carteles ". Verá que agregamos contenido, agregamos y eliminamos elementos, los reordenamos y ejecutamos algunos códigos abreviados.

A pesar de ser un ejemplo básico, te dará una idea de lo que puedes hacer en una página de plantilla y te permitirá explorar nuevas posibilidades.

 // elimina los elementos del resumen del producto
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10);
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
	
		// Contenido personalizado
		printf('<h1>Este es el <b>'.$post->post_name.' </b>poster</h1>');
		printf('<h4>Una página de producto completamente personalizada para los productos de la categoría "carteles"</h4>');
		// Descripción
		printf('<h5>'.$post->post_excerpt.'</h5>');
		//miniatura
		do_action('woocommerce_before_single_product_summary');
				
		//agregar meta
		do_action('woocommerce_single_product_summary');
		// códigos cortos
		echo do_shortcode(' [ add_to_cart show_price="false" class="my-addtocart" ] '); echo "<h3>Contacto:</h3>".do_shortcode('[wpforms]'); echo "<h3>Más pósters:</h3>".do_shortcode(' [ product_category category="posters" orderby="desc" limit="4" ] ');

Ahora si revisamos el frontend, veremos lo siguiente: Cómo editar la página de productos de WooCommerce mediante programación: plantilla de página de productos para una taxonomía específica Tenga en cuenta que estamos utilizando el objeto de publicación global. var_dump($post); para mostrarle toda la información disponible relacionada con el producto actual. Puede usar cualquiera de sus datos tal como lo hemos hecho en el script de muestra con la descripción del producto: $post->post_excerpt .

3) Personaliza la página del producto con un script CSS

Otra forma práctica y sencilla de editar la página del producto de WooCommerce (y cualquier otra página) mediante programación es mediante el uso de código CSS . Esto lo ayudará a diseñar la página del producto y darle la apariencia de su negocio.

    1. Primero, debe crear un nuevo archivo en su tema secundario con la extensión .css para que pueda agregar sus scripts CSS allí. Le recomendamos que lo nombre single-product.css o algo similar para que sea fácil de encontrar.
    2. Luego, coloque el archivo en la carpeta principal del tema secundario al mismo nivel que los archivos functions.php y style.css .
    3. Después de eso, 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', 'load_custom_product_style');
      función cargar_estilo_producto_personalizado() {
        si ( es_producto() ){
        wp_register_style( 'product_css', get_stylesheet_directory_uri() . '/single-product.css', false, '1.0.0', 'all' );
          wp_enqueue_style('producto_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.

4. Después de agregar este fragmento, debería poder editar el estilo de las páginas del producto agregando sus reglas CSS personalizadas a su archivo CSS.

Aunque este método es bastante simple y le proporcionará una solución rápida y fácil, puede que no sea ideal para algunos casos. Como el CSS se puede editar desde la interfaz, si un usuario sabe cómo usar las herramientas de desarrollo del navegador, podría hacer visible fácilmente cualquier elemento oculto editando el CSS.

Edite la página de un solo producto de WooCommerce con CSS

Veamos algunos otros ejemplos de cambios que puede hacer en la página del producto usando un poco de CSS.

Para aplicar los siguientes scripts, en su panel de WordPress, vaya a Apariencia > Personalizar > CSS adicional.

Cambiar el tamaño de fuente del título

Esto cambiará el tamaño de fuente de los títulos de productos de su página a 32. Simplemente ajuste el código para seleccionar el tamaño que desee.

 .woocommerce div.producto .product_title { 
        tamaño de fuente: 32px; 
}
Cambiar el color del título

También puede personalizar el color del título de la página de su producto. Para hacer eso, simplemente use el siguiente código y ajuste el color. Para este ejemplo, estamos usando naranja. Le recomendamos que utilice un selector de código hexadecimal como este para elegir el color que desee.

 .woocommerce div.producto .product_title { 
            color: #FFA500; 
}
Cambiar el color del botón Comprar ahora

Del mismo modo, puede cambiar el color del botón Comprar ahora. En este ejemplo, estamos usando Dodger Blue, pero puede elegir cualquier otro color que desee ajustando el código.

 .woocommerce div.producto .botón { 
        fondo: #1E90FF; 
}

Conclusión

En resumen, personalizar tu tienda online es clave para diferenciarte de tus competidores. Las páginas de productos son algunas de las páginas más importantes de cualquier tienda y hay muchas cosas que puede hacer para mejorar la experiencia del cliente y aumentar sus ventas.

Aunque podría usar complementos para esto, le recomendamos que edite la página del producto de WooCommerce mediante programación si tiene algunas habilidades de codificación. Te brinda mucha flexibilidad para personalizar cualquier elemento de tu tienda sin necesidad de instalar ninguna herramienta adicional. En esta guía, hemos visto cómo personalizar la página del producto de tres maneras diferentes:

  • usando ganchos
  • Anular plantillas de WooCommerce
  • Con secuencias de comandos CSS

Cuando sea posible, debe intentar usar ganchos de WooCommerce en lugar de sobrescribir archivos de plantilla. Es una de las mejores prácticas que recomienda WordPress y es menos arriesgada. Sin embargo, para tareas complejas que incluyen funciones u objetos, es posible que deba editar los archivos de plantilla. Si logras combinar ambas técnicas, podrás personalizar lo que quieras en tu tienda.

Finalmente, eche un vistazo al tema secundario completo que incluye todos los scripts de muestra que hemos usado en este tutorial. Para obtener más información sobre cómo personalizar su tienda, consulte las siguientes guías:

  • Aprenda a personalizar los archivos de plantilla de WooCommerce
  • Cómo personalizar la página de la tienda de WooCommerce
  • Personaliza el botón Agregar al carrito en WooCommerce
  • Cómo eliminar productos relacionados con WooCommerce
  • Cómo editar el pago de WooCommerce (codificación y complementos)

¿Tuviste algún problema siguiendo nuestro tutorial? Háganos saber en la sección de comentarios a continuación y haremos todo lo posible para ayudarlo.