Hoy en día Woocommerce ha tomado la industria del comercio electrónico por asalto con su innovadora flexibilidad y opciones de personalización. En el mundo del comercio electrónico, ocupa un lugar destacado. En la actualidad, posee el 27% de la cuota de mercado del comercio electrónico.
Pero las plantillas prediseñadas y las páginas de productos no satisfacen las necesidades de todos los negocios. Hay un montón de opciones de personalización en WooCommerce.
Para obtener buenos resultados, su tienda debe seguir las mejores prácticas de personalización. Un componente clave de la personalización se encuentra en las páginas de productos y plantillas. Una estrategia de personalización bien implementada puede reducir los carritos abandonados.
Dado que la mayoría de los clientes visitan su tienda en línea, debe facilitar la navegación y la personalización de productos y plantillas para garantizar el éxito.
Este artículo muestra cómo personalizar plantillas de WooCommerce, editar plantillas de productos y personalizar páginas de productos.
¿Por qué es importante para los propietarios de tiendas personalizar las plantillas de WooCommerce?
WooCommerce tiene toneladas de opciones de personalización. Puedes personalizar cualquier cosa, desde el pago hasta las páginas de la tienda, páginas de categorías, páginas de agradecimiento, etc. Esto ayuda a que tu tienda destaque entre la multitud, pero para ser realmente distintivo, personalizar las plantillas de WooCommerce podría ayudar.
Es esencial editar las páginas predeterminadas de su sitio para tener un aspecto diferente al de su competencia. También puede personalizar las plantillas predeterminadas para dar una ventaja a su negocio.
Las plantillas que utilice pueden personalizarse para añadir funciones y detalles a su tienda en línea. Con estas características, puedes ofrecer a los compradores una mejor experiencia de cliente. Por lo tanto, debes mantener tu tienda de comercio electrónico actualizada profundizando en la edición de plantillas de WooCommerce. Sigue leyendo para explorar las formas de editar Plantillas WooCommerce.
Leer: Cómo actualizar mi tarjeta de débito en WooCommerce
Personalización de plantillas WooCommerce con PHP
Los plugins y los fragmentos de código te permiten editar casi cualquier aspecto de tu sitio web. Con WooCommerce, puedes editar plantillas mediante programación.
A continuación se indican dos formas de personalizar las plantillas mediante programación:
- Sobreescritura de plantillas
- Con ganchos
Ambos métodos funcionan, así que elija el que le resulte más fácil. Debe comprender las principales diferencias entre estos métodos para determinar cuándo utilizar cada uno.
Ganchos vs. Sobrescritura de plantillas
Con los ganchos se pueden realizar modificaciones sencillas mediante acciones y filtros. Sobrescribiendo archivos de plantilla, se pueden realizar personalizaciones más complejas.
Además, tenga en cuenta no sobrescribir un archivo de plantilla con un gancho si se utiliza en un archivo de plantilla específico. Si sobrescribe la plantilla, los ganchos utilizados en ese archivo se sustituirán y dejarán de ser efectivos.
Seleccione el método que se adapte a sus necesidades después de averiguar cuáles son.
Modificar plantillas de WooCommerce sobrescribiéndolas
Al realizar personalizaciones complejas, es mejor sobrescribir las plantillas que utilizar ganchos.
Del mismo modo, la edición de functions.php es muy similar. Los archivos principales de la plantilla WooCommerce deben ser editados en lugar de los archivos del tema.
Haga clic en Plugins > Editor de plugins, elija WooCommerce en el menú desplegable y elija plantillas para ver los archivos de plantilla.
Esta sección contiene todos los archivos principales que necesitas editar, a saber archive-product.php, content-product-cat.php, y content-product.php. También es posible editar archivos de plantilla en varios lugares, como el carrito, la caja y el correo electrónico.
Los archivos de plantilla de WooCommerce tienen muchas cosas que puedes cambiar. Esto te permite personalizar tanto los subdirectorios como las carpetas.
El siguiente paso es ver plantillas WooCommerce personalizadas.
Añadir shortcodes a las plantillas de WooCommerce.
Los shortcodes son una forma común de personalizar el código de WooCommerce. Para editar plantillas, WordPress y WooCommerce te dan un montón de shortcodes.
A continuación se muestra un script que muestra el tablero de Mi Cuenta de WooCommerce en cada página de producto. Añádelo al archivo single-product.php y actualízalo.
| <?php if ( ! defined( ‘ABSPATH’ ) ) { exit; // Exit if accessed directly } get_header( ‘shop’ ); while ( have_posts() ) : the_post(); wc_get_template_part( ‘content,’ ‘single-product’ ); endwhile; // end of the loop. do_action( ‘woocommerce_sidebar’ ); $t= ‘<div id=”myacc”><h4>My Account</h4>’; $t.= do_shortcode(“[woocommerce_my_account]”); $t.=”</div>”; echo $t; get_footer( ‘shop’ ); |
El panel aparecerá después de previsualizar las páginas de producto.
Asegúrese de que el cliente sabe que lo ha comprado antes
Las plantillas de WooCommerce también pueden modificarse para ofrecer descuentos a los clientes fieles. También en este caso, copie y pegue el código en la página single-product.php.
| get_header( ‘shop’ ); while ( have_posts() ) : the_post(); wc_get_template_part( ‘content’, ‘single-product’ ); endwhile; // end of the loop. $current_user = wp_get_current_user(); if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ): echo ‘<div class=”user-bought”>♥ Hey ‘ . $current_user->first_name . ‘, you\’ve purchased this before. Buy again using this coupon: <b>PURCHASE_AGAIN_21</b></div>’; endif; get_footer( ‘shop’ ); |
Los clientes verán el mensaje de pago después de ver un producto que ya han comprado.
Explore: Magento vs. WooCommerce: ¿Cuál es la mejor opción en 2023?
Editar plantillas WooCommerce usando hooks
Los hooks también son útiles para personalizar las plantillas de WooCommerce si sobrescribir los archivos de la plantilla no es lo tuyo. Puedes añadir hooks como acciones o filtros a tu sitio web para aumentar su funcionalidad rápidamente y realizar cambios sencillos.
Además, puedes editar las plantillas de tu tienda a través de los hooks de WooCommerce. Este enfoque sólo se recomienda para personalizaciones sencillas. Es mejor sobrescribir las plantillas para modificaciones complejas.
Abra su archivo functions.php en Apariencia > Editor de temas y copie y pegue el fragmento de código con sus ganchos de acción o filtro.
Estos son algunos ejemplos de hooks disponibles para editar plantillas WooCommerce.
Añadir información a una sola imagen de producto
Si desea mostrar información adicional sobre el producto encima de la imagen, inserte el siguiente código en functions.php.
| // Add custom function function quadlayers_before_single_product() { echo ‘<h2>Everything is 25% off for this week!</h2>’; } // Add the action add_action( ‘woocommerce_before_single_product’, ‘quadlayers_before_single_product’, 11 ); |
En las páginas de productos individuales, aparecerá este mensaje.
Personalizar Plantilla WooCommerce con Plugins
¿Le cuesta codificar? No hay problema. Puedes personalizar las plantillas WooCommerce con plugins. A medida que la industria crece, hay un sinfín de plugins para personalizar tus plantillas.
Aquí viene el plugin más eficiente: Editar Plantillas WooCommerce. Es un plugin gratuito fácil de usar que te permite personalizar las plantillas de tu tema. Con unos pocos clics, puede intercambiar plantillas y restaurar los valores predeterminados en cualquier momento.
Estos son algunos de los plugins adicionales de WooCommerce que le permiten personalizar las plantillas y mejorar el rendimiento de su tienda.
- Campos personalizados de WooCommerce: Con este plugin, los usuarios pueden crear campos únicos dentro de las páginas de productos de WooCommerce, páginas de pago y más.
- Personalizador WooCommerce: Dedicado a las plantillas de WooCommerce, este plugin ofrece una variedad de opciones de personalización adicionales para su tienda.
- WooCommerce Página de un solo producto Personalizador: Este plugin le permite modificar la apariencia de la página de producto único dentro de WooCommerce.
Conozca: ¿Cómo configurar las reservas de WooCommerce?
Personalización de las Páginas de Producto de WooCommerce: ¿Por qué es esencial?
Personalizar las páginas de producto de WooCommerce es crucial, así que no puedes perdértelo. Los beneficios y ventajas de personalizar las páginas de producto de WooCommerce son infinitos. Con esto, es posible eliminar las preocupaciones de los clientes, establecer una presentación distintiva y mejorar la satisfacción del cliente.
Estas son algunas de las ventajas cruciales de personalizar las páginas de productos:
Páginas optimizadas para la conversión
Una página de producto personalizada puede aumentar las tasas de conversión. Se pueden implementar muchas opciones, incluidas las de búsqueda y filtrado. Por lo tanto, los clientes encontrarán y comprarán productos más fácilmente con menos puntos de fricción.
Hacerlo más atractivo
El objetivo de la personalización suele ser diseñar y maquetar páginas de productos que atraigan y atraigan a los clientes. Las imágenes atractivas, las descripciones atractivas de los productos y los elementos estéticamente agradables pueden despertar el interés del cliente.
La experiencia del usuario podría mejorarse
Asegúrese de que sus opciones de diseño sean claras e intuitivas, que la velocidad de carga sea rápida, que la navegación sea sencilla y que sus clientes tengan una gran experiencia. Esto impulsará las conversiones y conseguirá que repitan clientes.
Conozca: Los mejores complementos para productos de WooCommerce
Formas de personalizar las páginas de productos
Para mantenerse al día con el atractivo visual de su tienda, es necesario personalizar sus páginas de productos. Aquí hay tres métodos cruciales para personalizar las páginas de productos con éxito:
- Mejorar las páginas de productos de WooCommerce con plugins
Usando WooCommerce, puedes crear fácilmente una tienda online. Hay varios plugins disponibles para mejorar tu tienda, incluidos los que personalizan las páginas de productos.
Personalizar las páginas de producto con los plugins de WooCommerce es fácil:
Plugins
- Complementos de productos WooCommerce: Usando este plugin, puedes añadir casillas de verificación, desplegables y cuadros de texto a las páginas de tus productos.
- WooCommerce 360º Imagen: Usando este plugin, puedes rotar imágenes a tu gusto.
- Video de Producto para WooCommerce: El plugin permite añadir vídeos de productos.
- Tabla de tallas para WooCommerce: Este plugin hace que añadir tablas de tallas a sus productos sea fácil.
- Recomendaciones de productos: Este plugin le permite añadir una sección de recomendaciones a su página de producto.
Relacionado: 40+ Los Mejores Plugins WooCommerce [Gratis+Pagado]
- Personalizar las páginas de productos de WooCommerce con CSS
Usar CSS para personalizar los productos de WooCommerce puede hacer que tu tienda online destaque y ofrezca a los clientes una experiencia única. Para cambiar las páginas de tus productos, escribe el código CSS.
Cuando hayas iniciado sesión, ve a Apariencia → Personalizar.
Código CSS para CTA negro
Añadiendo este código a CSS adicional cambiará el color por defecto del CTA a negro.
| button.alt, input[type=”button”].alt, input[type=”reset”].alt, input[type=”submit”].alt, .button.alt, .widget-area .widget a.button.alt { background-color: #1d1a1a; border-color: #333333; color: #ffffff; } |
Código CSS para CTA azul
Además, para convertir el negro en azul, utilice el siguiente código CSS.
| button.alt, input[type=”button”].alt, input[type=”reset”].alt, input[type=”submit”].alt, .button.alt, .widget-area .widget a.button.alt { background-color: #4f5dd5; border-color: #333333; color: #ffffff; } |
- Añadir código personalizado a las páginas de producto de WooCommerce
Si tiene conocimientos técnicos, puede implementar cómodamente la personalización de la página de producto mediante código personalizado.
Aprenda: Por qué las FAQs son esenciales para tu tienda WooCommerce?
Paso 1: Establecer una plantilla global
Para empezar, es necesario establecer una plantilla global que se utilizará para todas las páginas de productos.
Comience con un comentario PHP indicando el nombre de la plantilla en la parte superior.
Crea un archivo template-custom-product.php y ponlo en el tema activado.
| <?php /*Template Name: Customize Product*/ ?> |
Esta plantilla utiliza la página de producto por defecto de WooCommerce. Aquí está el código.
| <?php $params = array(‘posts_per_page’ => 5, ‘post_type’ => ‘product’); $wc_query = new WP_Query($params); ?> <?php if ($wc_query->have_posts()) : ?> <?php while ($wc_query->have_posts()) : $wc_query->the_post(); ?> <?php the_title(); ?> <?php endwhile; ?> <?php wp_reset_postdata(); ?> <?php else: ?> <p> <?php _e( ‘No Products’); ?> </p> <?php endif; ?> |
Es una plantilla básica. Aunque hace el truco, puedes hacer más con WooCommerce.
WooCommerce ofrece varias funciones para personalizar sus páginas de visualización de productos que incluyen una amplia gama de información:
| the_permalink() - Muestra la URL del producto. the_content() - Muestra la descripción completa del producto. the_excerpt() - Muestra una breve descripción del producto. the_ID() - Muestra el ID del producto. the_title() - Muestra el nombre del producto. the_post_thumbnail() - Muestra la imagen del producto. |
Paso 2: Añadir Funcionalidades en el functions.php del Tema Activado
Mostrar categorías de productos WooCommerce
Las categorías son donde usted categoriza sus productos. Activa el tema e importa este fragmento en el archivo functions.php para indicar la categoría de un producto.
<?php if ( ! defined( ‘ABSPATH’ ) ) { exit; } 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( ‘SKU:’, ‘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( ‘Category:’, ‘Categories:’, count( $product->get_category_ids() ), ‘woocommerce’ ) . ‘ ‘, ‘</span>’ ); ?> <?php echo wc_get_product_tag_list( $product->get_id(), ‘, ‘, ‘<span class=”tagged_as”>’ . _n( ‘Tag:’, ‘Tags:’, count( $product->get_tag_ids() ), ‘woocommerce’ ) . ‘ ‘, ‘</span>’ ); ?> <?php do_action( ‘woocommerce_product_meta_end’ ); ?> </div> |
Mostrar miniaturas de categorías de productos
Hay una miniatura disponible para cada categoría de producto. Cuando estés listo para configurar la visualización personalizada de tus productos, añade este código al template.php o functions.php de tu tema.
| <?php function cwresponse_get_thumbnail(){ if(is_page(205)){ $args = array( ‘tax_query’ => array( array( ‘taxonomy’ => ‘product_cat’, ‘field’ => ‘slug’ ) ) ); $random_products = get_posts( $args ); foreach ( $random_products as $post ) : setup_postdata( $post ); ?> <div><a href=”<?php the_permalink(); ?>”><?php the_post_thumbnail(); ?></a></div> <?php endforeach; wp_reset_postdata(); } } add_action(‘wp_footer’, ‘cwresponse_get_thumbnail’); |
Elimine el encabezamiento de la descripción.
Cuando utilice Woocommerce, simplemente desmarque el campo de descripción para cada ficha de producto, y edite el archivo functions.php para incluir el siguiente código.
| add_filter( 'woocommerce_product_description_heading', '__return_null' ); |
Eliminar el título del producto
He aquí cómo eliminar el título en las pestañas de producto único de woocommerce: pon este código en functions.php.
| remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title' ); |
Paso 3: Cambiar las plantillas de WooCommerce
Pon el código de abajo en el archivo content-single-product.php o en el directorio single product bajo woocommerce/templates. Es mejor que utilices functions.php.
| <div class=”images”> <?php if ( has_post_thumbnail() ) { $image_caption = get_post( get_post_thumbnail_id() )->post_excerpt; $image_link = wp_get_attachment_url( get_post_thumbnail_id() ); $image = get_the_post_thumbnail( $post->ID, apply_filters( ‘single_product_large_thumbnail_size’, ‘shop_single’ ), array( ‘title’ => get_the_title( get_post_thumbnail_id() ) ) ); $attachment_count = count( $product->get_gallery_attachment_ids() ); if ( $attachment_count > 0 ) { $gallery = ‘[product-gallery]’; } else { $gallery = ”; } echo apply_filters( ‘woocommerce_single_product_image_html’, sprintf( ‘<a href=”%s” itemprop=”image” class=”woocommerce-main-image zoom” title=”%s” data-rel=”prettyPhoto’ . $gallery . ‘”>%s</a>’, $image_link, $image_caption, $image ), $post->ID ); } else { echo apply_filters( ‘woocommerce_single_product_image_html’, sprintf( ‘<img src=”%s” alt=”%s” />’, wc_placeholder_img_src(), __( ‘Placeholder’, ‘woocommerce’ ) ), $post->ID ); } ?> <?php do_action( ‘woocommerce_product_thumbnails’ ); ?> </div> |
También puede escribir código CSS.
.images { float: right! important; }
Por fin. Has terminado.
Más información: ¿Cómo añadir envíos a WooCommerce?
Conclusión
Crear páginas y plantillas de productos de WooCommerce únicas y visualmente atractivas mejora la experiencia de compra de los clientes.
La utilización de anulaciones, ganchos, filtros y personalización CSS le permitirá personalizar sus páginas de productos para responder a las expectativas de sus clientes y alinearse con su identidad de marca.
Optimiza la capacidad de respuesta móvil de tu tienda online con WooCommerce y personalízala para mejorar la experiencia general del usuario. Empieza a implementar prácticas de personalización y pon tu tienda a ganar el mejor valor.
¿Buscas ayuda profesional para personalizar WooCommerce? Póngase en contacto con nosotros hoy mismo.
