En este texto, aprenderá cómo crear su tienda en línea utilizando el complemento Elementor Pro y el tema Ocean WP. Lo primero que necesitas es actualizar Elementor a la versión Pro, porque tiene todas las opciones que necesitamos para crear una tienda WooCommerce, y también necesitas el tema Ocean WP, que es gratuito, así como el complemento WooCommerce.
Tienda online - creación
Debes crear una nueva página y nombrarla tienda o como quieras, en este ejemplo se llamará Mi Tienda, luego en la configuración del tema, en las opciones. Diseño de contenido necesitas configurarlo en 100% Ancho completo, así como desactivar los márgenes y hacer clic en Editar con Elementor.
Una vez que se abre el editor de páginas en Elementor, comenzamos a crear la página. Comenzamos agregando el título, al que le asignamos estilo en la opción Estilo, cambiando su color, tamaño de fuente y todo lo demás como deseemos, agregando espaciado y un editor de texto y obteniendo la sección de título, que podemos guardar como plantilla y actualmente se parece a la imagen a continuación.
Una vez que hayamos hecho eso, es hora de comenzar a agregar elementos de WooCommerce. Encontramos el código de los elementos. Productos Woo elemento y agregarlo a la página. Por defecto, hay 4 productos en 4 columnas, y lo cambiaremos según cuántos productos tengamos y cuántas columnas (se pueden configurar de 1 a 6) queramos.
Para establecer qué productos queremos mostrar al final, cambiamos cosas en la opción Contenido, en la parte Consulta. Podemos elegir por defecto los últimos productos o elegirlos manualmente, luego podemos elegir bajo el autor, en este ejemplo específicamente porque es música, pero el autor puede ser un productor, por ejemplo. luego por categorías de productos, por etiquetas, por filtros y similares. Depende de usted elegir. Bajo opción Avanzado puedes cambiar los márgenes, el espaciado, el fondo, los bordes y más.
Una vez hecho esto, guardamos la página y vamos al panel de control. Allí, en el complemento WooCommerce, creamos productos y configuramos las categorías, el precio, las etiquetas y si están separados o no.
Al pulsar sobre las estrellas elegiremos que el producto quede resaltado y si hemos configurado mostrar productos destacados en la sección se mostrarán todos los productos que tengamos activada la estrella.
Lo siguiente que vamos a crear es una nueva sección de 2 columnas. Separaremos los productos seleccionados de los demás y realizaremos los llamados Sección de llamado a la acción. Agregaremos una imagen a una columna y texto a la otra. En una columna agregaremos una imagen con la opción Estilo, pero cuando lo agregamos no se muestra. Para solucionar esto, agregaremos un nuevo elemento a la columna. Espaciador, es decir, la barra espaciadora. Cuando hicimos eso se mostró la imagen, para poder configurarla para que se vea en su totalidad o tanto como queramos es necesario ajustar las dimensiones de Spaser y la imagen se expandirá. Luego seleccionamos la columna nuevamente y le damos estilo a cómo se verá la imagen. En la segunda columna, agregaremos un título, texto y un botón que llamará a la gente a la acción. Por supuesto, también le daremos estilo a esta columna, cambiaremos el color, las letras, el tamaño de fuente, los espacios, los márgenes, el fondo y otros según lo desee en la opción Estilo.
Después de haber creado la sección CTA (Call To Action), lo siguiente que creamos es la sección de ventas. Para facilitar nuestro trabajo, agregamos la plantilla ya guardada de la sección de título, que creamos al principio del texto, y simplemente la cambiamos para que no sean iguales. Luego agregamos el elemento Woo Products y configuramos qué productos queremos mostrar en esa sección. Cambiemos lo que se necesita en la opción Consulta como en la ocasión anterior y obtengamos una sección como la de la imagen a continuación.
Si queremos cambiar el botón Añadir al carrito, para que encaje mejor con el resto de la página, debemos ir al panel de control, luego a Personalizar y hacemos clic en la página de nuestra tienda y luego en la opción CSS/JS personalizado. Allí escribimos un código CSS corto para modificar los botones apuntando a etiquetas específicas de WooCommerce como productos y li.productoy utilícelos para diseñar los botones.
