WooCommerce : Personalizar la pagina de PRODUCTOS
Ficha de Productos
→ Vea tambien WooCommerce : Estructura de la FICHA o pagina del PRODUCTO
Los mejores plugins de WooCommerce para personalizar tu página de producto
Single Product Page Customizer
Single Product Page Customizer para colocar contenido en distintos lugares de la página. Parte de este contenido será estático, y otras partes serán dinámicas, como por ejemplo, mostrar a los usuarios una lista de los productos más vendidos.
Una vez hayas instalado el plugin, dirígete a WooCommerce > Single Product Page Customizer (Personalizador de página de producto individual). El plugin viene con un mapa guía para mostrarte distintos lugares en donde puedes colocar tu propio contenido. Haz clic sobre el botón Add New Position (Añadir nueva posición) para seleccionar una ubicación para tu contenido. Esto te mostrará un editor como el de la siguiente imagen. Puedes seleccionar algo desde el menú desplegable y a continuación pasar a la siguiente pestaña. Esto nos permitirá colocar nuestro propio HTML personalizado a la página.
Empecemos colocando un banner en la parte superior de cada página de producto. Selecciona WooCommerce before single product (WooCommerce antes del producto individual) en el menú desplegable y después introduce lo siguiente en el editor HTML.
<section class="offers">
<p>Get free shipping on purchases over $50.</p>
</section>Ver mas informacion en el autor del articulo: https://webdesign.tutsplus.com/es/customize-a-woocommerce-product-page-for-free--cms-39033t
hooks de resumen de la ficha de producto de WooCommerce
Autor : https://wisdmlabs.com/blog/reorder-content-woocommerce-product-page/
El contenido que se muestra en una sola página de resumen de producto se muestra en tres acciones. Puede encontrar estas acciones ejecutándose en 'woocommerce/templates/content-single-page.php'.
/**
* woocommerce_before_single_product_summary hook
*
* @hooked woocommerce_show_product_sale_flash - 10
* @hooked woocommerce_show_product_images - 20
*/
do_action( 'woocommerce_before_single_product_summary' );
/**
* woocommerce_single_product_summary hook
*
* @hooked woocommerce_template_single_title - 5
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_add_to_cart - 30
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
*/
do_action( 'woocommerce_single_product_summary' );
/**
* woocommerce_after_single_product_summary hook
*
* @hooked woocommerce_output_product_data_tabs - 10
* @hooked woocommerce_output_related_products - 20
*/
do_action( 'woocommerce_after_single_product_summary' );Cada detalle del producto se muestra en un gancho para una acción. El número asociado con cada gancho básicamente establece la prioridad de ejecución. Cuanto menor sea el número, mayor será la prioridad de ejecución. Por lo tanto, en 'woocommerce_single_product_summary' , el orden de visualización será el título del producto, el precio, el extracto, los enlaces para agregar al carrito, meta y compartir, debido a los pesos asociados.
Para cambiar el orden hay que cambiar la prioridad asociada y WordPress se encargará de mostrar el contenido en dicho orden. Para cambiar la prioridad hay que quitar el gancho y volver a añadirlo con un nuevo número.
Por lo tanto, si desea mostrar el extracto después del botón Agregar al carrito, el peso del gancho del extracto debe ser mayor que el del gancho del botón Agregar al carrito, lo que indica una prioridad menor.
/** to change the position of excerpt **/
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 31 );Cómo mostrar campos personalizados
Se pueden agregar datos personalizados a un tipo de publicación personalizada de WooCommerce "Productos", mediante metacuadros o mediante el complemento Advanced Custom Fields . Para mostrar estos datos de campo personalizados en la página de resumen del producto, deberá crear una función que muestre los campos y vincularla a una acción de WooCommerce, junto con la prioridad deseada.
Por ejemplo, si desea mostrar los campos personalizados después del extracto del producto pero antes de agregarlo al carrito, tendrá que escribir una función similar a la siguiente.
función wdm_add_custom_fields()
{
/** si ha agregado información usando un metabox **/
echo 'ABC' . get_post_meta(get_the_ID(), "ABC" , true );
/** si ha usado ACF para agregar campos personalizados **/
echo 'XYZ' . get_field(“ XYZ ”);
}
add_action( 'woocommerce_single_product_summary' , 'wdm_add_custom_fields' , 21 );Recuerde que estos cambios deben realizarse en el archivo functions.php .
De manera similar, en lugar de reordenar el contenido, puedes optar por eliminar el contenido no deseado o agregar contenido adicional similar a la visualización de contenido de campos personalizados. Esto puede ayudarte a personalizar tu página de producto de WooCommerce , al estructurar el contenido de la forma que desees.
Lea también:
- Cómo agregar una pestaña personalizada a una página de producto de WooCommerce
- Cómo agregar datos personalizados a un pedido de WooCommerce
Autor : https://wisdmlabs.com/blog/reorder-content-woocommerce-product-page/
PREGUNTAS
¿Cómo se hace para que la descripción del producto esté debajo de las imágenes y ocupe todo el ancho de la página?
Autor : https://wisdmlabs.com/blog/reorder-content-woocommerce-product-page/
//Pruebe esto: el código anterior debería mover la descripción breve del producto debajo de //las dos columnas.
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_template_single_excerpt', 10 );Cambiar la posición de la imagen del producto, el resumen y el meta.
Autor : https://wisdmlabs.com/blog/reorder-content-woocommerce-product-page/
Actualmente, mi página única muestra la imagen a la izquierda y luego el resumen a la derecha y quiero meta, luego la imagen y luego el resumen.
Quieres que los metadatos y la imagen estén a la izquierda y, luego, el resumen a la derecha. Para ello, puedes probar el código que se indica a continuación:
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_meta', 5 );¿Cómo puedo agregar el código SKU del producto encima del título del producto?
Autor : https://wisdmlabs.com/blog/reorder-content-woocommerce-product-page/
add_action( 'woocommerce_single_product_summary', 'wdm_show_sku', 5 );
function wdm_show_sku(){
global $product;
echo $product->get_sku();
}Poner mi imagen debajo del título en lugar de encima
Autor : https://wisdmlabs.com/blog/reorder-content-woocommerce-product-page/
remove_action('woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20);
add_action( 'woocommerce_single_product_summary', 'woocommerce_show_product_images', 11 );Anular una plantilla de página
Autor : https://wisdmlabs.com/blog/reorder-content-woocommerce-product-page/
Puedes consultar este enlace ( http://docs.woothemes.com/document/template-structure/ ) que explica cómo puedes anular una plantilla de página. Tendrás que anular single-product.php.
Tener una página de ancho completo, sin barra lateral, título, descripción corta, imagen, descripción larga (sin pestañas)
Autor : https://wisdmlabs.com/blog/reorder-content-woocommerce-product-page/
Puedo lograr lo anterior, pero no puedo centrar todo ni eliminar el enlace de la caja de luz en la imagen. Gracias de antemano.
remove_action('woocommerce_antes_del_resumen_de_un_único_producto', 'woocommerce_mostrar_imágenes_del_producto', 20);
add_action( 'woocommerce_antes_del_resumen_de_un_único_producto', 'woocommerce_mostrar_imágenes_del_producto', 11 );
remove_action( 'resumen_de_producto_único_woocommerce', 'extracto_único_de_plantilla_woocommerce', 20 );
add_action( 'resumen_de_producto_único_woocommerce', 'extracto_único_de_plantilla_woocommerce', 6 );
/* eliminar el meta – cat y la etiqueta */
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
//(se eliminaron las pestañas y la descripción de palabras, no hay problema)mostrar la descripción del producto entre el título y el precio
Autor : https://wisdmlabs.com/blog/reorder-content-woocommerce-product-page/
//Para empezar, si la descripción del producto está ubicada en una pestaña, intente eliminar la pestaña utilizando el siguiente código.
add_filter( 'woocommerce_product_tabs', 'wdm_remove_description_tab', 98 );
function wdm_remove_description_tab( $tabs ) {
unset( $tabs['description'] );
return $tabs;
}
//De acuerdo. El "extracto" es la "descripción breve". Por lo tanto, para cambiar la posición de la descripción (y agregarla debajo del título), intente usar el código siguiente:
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6 );Cambiar la ubicación de: Gancho woocommerce_show_product_images , ¿Cómo sacar este gancho del 'gancho woocommerce_before_product_simmary' y insertarlo en el 'gancho woocommerce_single_product_summary' debajo del product_title?
Autor : https://wisdmlabs.com/blog/reorder-content-woocommerce-product-page/
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_show_product_images', 9 );colocar los complementos de Gravity Form debajo de las pestañas de productos
Autor : https://wisdmlabs.com/blog/reorder-content-woocommerce-product-page/
Actualmente, se muestran encima de las pestañas, como la descripción, las reseñas, etc.
El complemento Gravity Forms muestra el formulario en el gancho woocommerce_before_add_to_cart_button. Prueba a usar el código que aparece a continuación para mostrarlo después de las pestañas de productos. (No lo he probado, así que avísame si funciona)
El plugin Gravity Forms para WordPress te permite crear y gestionar los formularios de contacto de tu página de WordPress.
// obtener la instancia del complemento Gravity Forms
global $woocommerce_gravityforms;
// desenganchar la acción actual de woocommerce_before_add_to_cart_button
remove_action( 'woocommerce_before_add_to_cart_button' , array ($woocommerce_gravityforms, 'woocommerce_gravityform' ), 10 );
// agregar el formulario después de las pestañas del producto usando el gancho woocommerce_after_single_product_summary
add_action( 'woocommerce_after_single_product_summary' , array ($woocommerce_gravityforms, 'woocommerce_gravityform' ), 15 );mover las pestañas de productos al área de pie de página
Autor : https://wisdmlabs.com/blog/reorder-content-woocommerce-product-page/
El área de pie de página del sitio generalmente proviene de footer.php,
por lo que tendrá que escribir el siguiente código en footer.php, donde quiera que desee mostrar las pestañas.
add_action('wdm_after_main_content','woocommerce_output_product_data_tabs', 10 );
do_action( 'wdm_after_main_content' );Además, en content-single-product.php, elimine las pestañas escribiendo el siguiente código arriba do_action( 'woocommerce_after_single_product_summary' );
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );¿Cómo reemplazar la sección de imágenes destacadas con una descripción breve?
(en la página de detalles de un solo producto)
Autor : https://wisdmlabs.com/blog/reorder-content-woocommerce-product-page/
Las imágenes destacadas se muestran mediante el enlace "woocommerce_before_single_product_summary". Usa este enlace para eliminarlas y, luego, mostrar la descripción breve en su lugar.
mostrar el precio y el botón de agregar al carrito en la misma fila (precio a la izquierda y agregar al carrito a la derecha).
Autor : https://wisdmlabs.com/blog/reorder-content-woocommerce-product-page/
Me gustaría mostrar el precio y el botón de agregar al carrito en la misma fila (precio a la izquierda y agregar al carrito a la derecha). Incluso si les doy a ambos la misma prioridad, es decir, 10, uno aparece sobre el otro. ¿Hay alguna manera de colocarlos en la misma fila? Cualquier ayuda será muy apreciada.
el código que se proporciona en este artículo no te servirá. Deberás editar el CSS.
referencia : https://wisdmlabs.com/blog/reorder-content-woocommerce-product-page/
¿Cómo puedo hacer que la descripción del producto que se encuentra actualmente debajo llene el área en blanco de las imágenes del producto?
Autor : https://wisdmlabs.com/blog/reorder-content-woocommerce-product-page/
Ofrezco servicios, por lo que no necesito imágenes de productos. Por lo tanto, ahora mismo mi página de producto individual está en blanco a la izquierda, el precio del producto está a la derecha y la descripción del producto debajo.
Solucion :
Puede mostrar una breve descripción del producto o la pestaña de productos predeterminada en lugar de la imagen del producto. Es importante tener en cuenta que definitivamente deberá modificar las plantillas correspondientes para que se ajusten a sus necesidades. Puede cambiar su posición utilizando el siguiente código.
remove_action( 'woocommerce_antes_del_resumen_de_un_producto' , 'woocommerce_mostrar_imágenes_de_producto' , 20 );
//código para agregar un extracto del producto - Imágenes del producto place
add_action( 'woocommerce_before_single_product_summary' , 'woocommerce_template_single_excerpt' , 20 );
remove_action( 'resumen_de_producto_único_woocommerce' , 'extracto_único_de_plantilla_woocommerce' , 20 );
// código para agregar pestañas de producto predeterminadas - Imagen del producto place
add_action( 'woocommerce_before_single_product_summary' , 'woocommerce_output_product_data_tabs' , 20 );
remove_action( 'woocommerce_after_single_product_summary' , 'woocommerce_output_product_data_tabs' , 10 );Lo hice, el área de la imagen del producto sigue vacía y la descripción del producto que aparece a continuación ha desaparecido. No llena el área de la imagen del producto en absoluto.
limpié mi archivo functions.php y lo intenté nuevamente. Funciona, solo que el resumen del producto (precio, título, etc.) está un poco más abajo. ¿Cómo puedo solucionar esto? Estoy usando WooThemes Canvas
Solucion
Supongo que has añadido una breve descripción del producto en lugar de la imagen del producto. Anula el archivo 'short-description.php' en tu tema y añade la siguiente estructura de carpetas: 'woocommerce/single-product'
Simplemente agregue, class=”wdm_description” – para el div 'descripción'.
Ahora agregue el siguiente CSS
.wdm_description {
ancho : 48 % ;
flotante : izquierda;
margen - derecho : 3,8 % ;
}Alineará todos los elementos correctamente.
Si desea agregar otro elemento, simplemente agregue el CSS adecuado. Si desea eliminar la etiqueta de venta, también puede usar:
remove_action( 'woocommerce_antes_del_resumen_de_un_único_producto' , 'woocommerce_mostrar_flash_de_venta_de_producto' , 10 );
Referencia : https://wisdmlabs.com/blog/reorder-content-woocommerce-product-page/
mover el precio justo antes del botón Agregar al carrito, en la página del producto. ¿Hay alguna manera de hacerlo?
Autor : https://wisdmlabs.com/blog/reorder-content-woocommerce-product-page/
remove_action( 'resumen_de_producto_único_woocommerce' , 'precio_único_de_plantilla_woocommerce' , 10 );
add_action( 'resumen_de_producto_único_woocommerce' , 'precio_único_plantilla_woocommerce' , 29 );mover los atributos y variaciones del producto a las pestañas de productos.
este enlace tiene una respuesta para ti https://gist.github.com/renegadesk/3967956
mover el producto relacionado arriba y las pestañas de información del producto abajo en la página del producto?
Autor : https://wisdmlabs.com/blog/reorder-content-woocommerce-product-page/
Intente cambiar la prioridad de woocommerce_output_related_products a menos de 10. Intente usar el código siguiente
/** para cambiar la posición del extracto **/
remove_action( 'woocommerce_after_single_product_summary' , 'woocommerce_output_related_products' , 20 );
add_action( 'woocommerce_after_single_product_summary' , 'woocommerce_output_related_products' , 8 );Eliminar el enlace del producto en la página de productos
Referencia : https://wordpress.org/support/topic/how-to-replace-remove-the-products-link-in-products-page
Con este css ya no podremos hacer clic en el producto para ver su detalle , no funciona con el boton leer mas pero se puede ocultar dicho boton
ul.products li.product .woocommerce-LoopProduct-link {
pointer-events: none;
}Cambiar el boton "Add to card" button by "Read more"
Referencia : https://wordpress.org/support/topic/how-to-replace-remove-the-products-link-in-products-page
add_filter( 'woocommerce_product_description_heading', 'remove_product_description_heading' );
function remove_product_description_heading() {
return '';
}
add_filter( 'woocommerce_loop_add_to_cart_link', 'ts_replace_add_to_cart_button', 10, 2 );
function ts_replace_add_to_cart_button( $button, $product ) {
if (is_product_category() || is_shop()) {
$button_text = __("Read More", "woocommerce");
$button_link = $product->get_permalink();
$button = '<a class="button" href="' . $button_link . '">' . $button_text . '</a>';
return $button;
}
}
Vea tambien: