WordPress facilita la creación de un sitio web, y WooCommerce puede convertir rápidamente cualquier sitio web de WordPress en una tienda online totalmente funcional. Sin embargo, si te limitas a utilizar su configuración predeterminada, tu sitio web puede tener un aspecto corriente y no destacar las características de tu negocio.

WordPress y WooCommerce cuentan con una amplia gama de plugins que pueden a?adir todo tipo de potentes funciones a la tienda. Uno de ellos, Elementor, es una herramienta muy útil que facilita la personalización de las páginas de producto de WooCommerce.

Hoja de Producto Woocommerce e Introducción a Elementor

Como se mencionó anteriormente, hay un gran número de plugins de WordPress disponibles que pueden ayudar a dise?ar un mejor sitio web de WordPress que satisfaga las necesidades. Algunos plugins son grandes plugins, mientras que otros se centran en la adición de elementos o características específicas.

Elementor es un ejemplo de lo primero:

Elementor ofrece una interfaz completamente nueva para dise?ar páginas web y crear contenidos. Gracias a la posibilidad de elegir y personalizar entre una enorme biblioteca de widgets, bloques y dise?os, tendrás más control sobre la creación de tu sitio web.

Por otro lado, la Hoja de Producto de WooCommerce es una solución más específica:

Este plugin ayuda a a?adir formularios dinámicos personalizables que listan productos de WooCommerce. Estas tablas se pueden utilizar para una variedad de aplicaciones, pero la integración con WooCommerce hace que sea una herramienta más que perfecta para mostrar productos y servicios de una manera fácil de usar y atractiva. (Si quieres mostrar contenido que no sean productos, como entradas, páginas o documentos, entonces puedes usar su otro plugin Posts Table Pro. Posts Table Pro se integra igual de bien con Elementor, y puede listar cualquier tipo de contenido de WordPress en una tabla, no sólo productos de WooCommerce).

Cómo usar Woocommerce Product Sheet con Elementor Page Builder

En primer lugar, asegúrate de que tanto el plugin Elementor como WooCommerce Product Table están instalados en el sitio, y que WooCommerce también está instalado y activado. Estos pasos suelen ser rápidos y sencillos, y una vez hechos, es hora de empezar a crear un sitio web único. Ahora, ?empecemos!

1. A?ade la ficha de producto de Woocommerce a un editor de texto o widget shortcode

Comience con la aplicación más básica y útil. Si sólo quieres usar la Tabla Dinámica de Productos en un sitio Elementor, a?ádela a un widget para que se muestre en el front-end. Abre cualquier página o entrada y asegúrate de que estás usando el editor de Elementor. Si ves la interfaz tradicional de WordPress, haz clic en el icono"Editar con Elementor".para cambiar:

Si es la primera vez que utilizas Elementor, echa un vistazo rápido. A la derecha, verás un gran espacio donde se muestra el contenido y se actualiza en tiempo real a medida que a?ades y editas contenido. A la izquierda, hay una lista de "widgets" que se pueden arrastrar a esta área y luego reorganizar y personalizar según sea necesario:

Es posible a?adir tablas de productos a muchos widgets de Elementor diferentes. Sin embargo, si sólo desea mostrar una única tabla de productos en la página, puede utilizar una sección de texto básica para ello. Por lo tanto, cogiendo el widgetWidget Editor de textoy arrástralo al área en blanco:

A continuación, puede hacer clic dentro del widget para eliminar el texto predeterminado e introducir el que desee. En cuanto a la forma del producto en sí, basta con pegar este código corto simple para agregarlo:

[product_table]

Independientemente del lugar de la página en el que se coloque el código correspondiente, la tabla de productos se mostrará en consecuencia. Esto puede comprobarse visualizando la página en el front-end del sitio web.

Si sólo desea utilizar los elementos para el código en sí, también puede utilizar el widget Shortcode:

Independientemente de dónde decida colocar la ficha de producto, recuerde siempre guardar la página una vez colocada. Puedes personalizar aún más el aspecto y la funcionalidad de la ficha de producto si quieres que tenga el aspecto que deseas.

Para ello, vuelve al panel de WordPress, busca el menú "WooCommerce" y selecciona la pesta?a "Ajustes". En la parte superior de la pantalla, haz clic en la opción "Productos" y, a continuación, busca y haz clic en "Tabla de productos" para realizar los ajustes pertinentes.

Aquí encontrarás una lista completa de ajustes para el formulario de producto de WooCommerce. Elige qué información se mostrará en el formulario, a?ade filtros y variables al formulario y mucho más. Todos los cambios realizados aquí se aplicarán automáticamente al formulario de producto que acabas de colocar con Elementor. Una vez que hayas terminado de hacer ajustes al formulario, guarda la configuración y ?listo!

2. Organizar varias fichas de producto mediante colapsos, pesta?as o botones basculantes

Si desea mostrar todos los productos de WooCommerce en una tabla, el método anterior funciona mejor. Sin embargo, si quieres crear varias tablas, cada una con una categoría de producto distinta, ?cómo lo consigues?

Hay varias formas de hacer esto en Elementor. Por ejemplo, utilice el widget Acordeón para crear el mismo efecto que en el ejemplo anterior.

En primer lugar, arrastre la parte Acordeón al área de edición derecha:

Puede utilizar el "+" para a?adir tantas pesta?as diferentes como desee y editar el título y el texto de cada pesta?a. También es posible a?adir una tabla de productos a una o varias pesta?as utilizando el mismo shortcode que antes.

Por supuesto, a?adir sólo los shortcodes básicos crearía una serie de tablas de productos idénticas. En su lugar, es necesario modificar cada shortcode para que sólo se muestren determinados productos, por ejemplo, los artículos de una categoría concreta. El método exacto depende de los productos que desee incluir y/o excluir de cada tabla.

Existen otros prácticos widgets de Elementor que pueden utilizarse para conseguir efectos similares. Estos incluyen el widget Toggle y el widget Tabs. Mostrar múltiples tablas de productos WooCommerce de una manera atractiva y organizada, Elementor puede lograr este efecto.

resúmenes

El uso del plugin WooCommerce Product Table junto con Elementor permite mostrar los productos de una forma fácil de usar y estéticamente agradable. Solo tienes que a?adir el shortcode de la tabla de productos al widget de Elementor y mostrar dinámicamente el contenido deseado.

Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres