Si no hay dos productos iguales… ¿Por qué las fichas de producto de tu tienda online son iguales que las de tu competencia? Aprende cómo personalizarlas y haz que tu ecommerce no se parezca en nada a tu competencia.
A continuación repasamos todo lo que debes tener en cuenta y que hemos visto en el videotutorial de hoy, para personalizar las fichas de producto de WooCommerce jugando con sus hooks:
- Abre o crea tu plugin de funciones e inserta el siguiente código.
<?php
//* Personalización de la página de producto de WooCommerce
add_action( 'after_setup_theme', 'martin_custom_ficha_producto_woocommmerce' );
function martin_custom_ficha_producto_woocommmerce() {
//remove_action( 'woocommerce_before_single_product', 'wc_print_notices', 10 );
//remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );
//remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
//remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
//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_price', 10 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
//remove_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30 );
//remove_action( 'woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 30 );
//remove_action( 'woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 30 );
//remove_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );
//remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
//remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
//remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
//remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
//remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
//remove_action( 'woocommerce_review_before', 'woocommerce_review_display_gravatar', 10 );
//remove_action( 'woocommerce_review_before_comment_meta', 'woocommerce_review_display_rating', 10 );
//remove_action( 'woocommerce_review_meta', 'woocommerce_review_display_meta', 10 );
//remove_action( 'woocommerce_review_comment_text', 'woocommerce_review_display_comment_text', 10 );
}- Descomenta (es decir, elimina las dos //) de la línea que quieras ejecutar y guarda el archivo de tu plugin de funciones para aplicar los cambios.
- Si lo que quieres es cambiar la posición de algún elemento, tendrás que hacer un replace, es decir, un remove_action seguido de un add_action, como en el siguiente ejemplo:
<?php
//* Personalización de la página de producto de WooCommerce
add_action( 'after_setup_theme', 'martin_custom_ficha_producto_woocommmerce' );
function martin_custom_ficha_producto_woocommmerce() {
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 20 );
}- Al aplicar el código del ejemplo anterior, estamos eliminando la descripción corta del producto de su posición original, para darle a continuación la instrucción de cargarlo en el mismo hook ‘woocommerce_single_product_summary’, pero con distinta prioridad.
¡Así de simple y así de fácil! Ahora solo tienes que empezar a experimentar con las distintas funciones de WooCommerce y sus hooks para cambiar por completo el aspecto de tus fichas de producto.
Resumiendo…
Cómo ves, jugar con estos pequeños fragmentos de código o snippets te permite personalizar tu tienda online como prefieras. Para limpiar tus fichas de producto de elementos innecesarios no es necesario instalar todo un plugin, tan sólo debes hacer una modificación sencilla como la que hemos visto en el tutorial de hoy.
Y como siempre, si tienes cualquier problema, no dudes en contactar conmigo. Nos vemos la próxima semana, con un nuevo tutorial. Hasta entonces… ¡feliz semana! 😉
