Cómo agregar la búsqueda de piezas de vehículos a la página de la tienda del paquete de diseño de reparación de automóviles de Divi

Cada semana, le proporcionamos un paquete de diseño Divi nuevo y gratuito que puede usar para su próximo proyecto. Junto con cada paquete de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.

Esta semana, como parte de nuestra iniciativa de diseño Divi en curso, le mostraremos cómo agregar la búsqueda de piezas de vehículos al paquete de diseño de reparación de automóviles de Divi . Esto permitirá a los visitantes de su sitio web navegar fácilmente por todos los artículos de su tienda. Tendrán la posibilidad de buscar por marca, modelo, año, motor o categoría. Cuanto más fácilmente puedan los visitantes encontrar el producto exacto que están buscando, mayores serán las posibilidades de que estos visitantes visiten su página.

Vistazo

Antes de sumergirnos en el tutorial de casos de uso, echemos un vistazo rápido al resultado final.

Parte 1: Descargar e instalar WooCommerce

Paso 1: Descarga WooCommerce

Para completar este tutorial, estamos trabajando con WooCommerce. Continúe y descargue el complemento yendo a la siguiente página y haciendo clic en el botón de descarga.

Paso 2: Cargue, active y configure el complemento

Cargue el complemento WooCommerce, actívelo y realice el proceso de configuración u omita esa parte por el momento.

Parte 2: Compre e instale el complemento Buscador de piezas de vehículos de WooCommerce

Paso 1: Compre el buscador de piezas de vehículos de WooCommerce

Junto con el complemento WooCommerce, también necesitaremos el complemento Buscador de piezas de vehículos WooCommerce pagado que puede comprar en la siguiente página .

Paso 2: Cargue y active el complemento

Nuevamente, cargue el complemento y actívelo también.

Parte 3: cambiar el color de énfasis del tema y la tipografía en el personalizador de temas

Paso 1: Ve al Personalizador de temas

Ahora, para comenzar, vamos a hacer los cambios del personalizador de temas que hacemos para cada paquete de diseño. Ve a Apariencia > Personalizar.

Paso 2: cambiar el color de acento del tema

Luego, vaya a Configuración general > Configuración de diseño y cambie el Color de énfasis del tema a ‘#f6961b’.

Paso 3: cambiar la tipografía

Tendremos que cambiar las familias de fuentes y el color del enlace del cuerpo también volviendo a Configuración general> Tipografía y aplicando los siguientes cambios:

  • Fuente del encabezado: Montserrat
  • Fuente del cuerpo: Montserrat
  • Color del enlace del cuerpo: #f6961b

Parte 4: Agregar búsqueda de piezas de vehículos y carrito a la barra lateral

Paso 1: Ve a Widgets

La primera parte de la creación de la búsqueda de piezas de vehículos es agregar el widget a su barra lateral. De esa manera, incluso cuando las personas estén buscando entre los productos, tendrán la posibilidad de configurar otra búsqueda de inmediato. Comience yendo a Apariencia > Widgets .

Paso 2: Elimina los widgets actuales en la barra lateral

Luego, elimine todos los widgets actuales dentro de su barra lateral. Las únicas dos cosas que queremos incluir son la búsqueda de piezas de vehículos y el carrito.

Paso 3: Agregue el Buscador de piezas de vehículos a la barra lateral

Desplácese hacia abajo en sus widgets. Una vez que haya cargado y activado su complemento, el Buscador de piezas de vehículos aparecerá dentro de sus widgets. Agregue esto a su barra lateral, use la vista vertical y habilite el filtro ‘año’. También puede habilitar las otras opciones, según sus preferencias.

Paso 4: Agregar carrito a la barra lateral

Ubique el widget del carrito también y, de la misma manera, agréguelo a su barra lateral.

Parte 5: Descargue el archivo CSV de muestra, cree el suyo propio y cárguelo

Paso 1: Vaya a ‘Importar CSV’

Ahora que tenemos el widget Buscador de piezas de vehículos y carrito en nuestra barra lateral, podemos comenzar a centrarnos en los diferentes términos que desea agregar a su sitio web. Hay cuatro tipos de términos que puede encontrar dentro de este complemento:

  • Hacer
  • Modelo
  • Año
  • Motor

Los términos se suceden entre sí. Primero está la marca, luego sigue el modelo, continúa con el año y termina con el motor. Puede agregar todo esto manualmente, pero para que todo sea más fácil, este complemento le permite cargar un CSV con exactamente esa información. Comience yendo a VPF > Importar CSV .

Paso 2: Descargar muestra

Una vez que esté allí, verá un enlace que iniciará una descarga de CSV de muestra. Continúe y descargue la muestra.

Paso 3: Modifique la hoja de cálculo según sus productos

Luego, comienza a modificar la lista de acuerdo a los productos propios de tu sitio web. Puede asignar múltiples productos a una marca, modelo, año y motor usando la columna de producto del artículo. Use el slug de la página de su producto para eso y separe sus productos usando una coma.

Paso 4: Cargue un nuevo CSV

Y, por último, vuelva a cargar este CSV modificado. Si echa un vistazo a sus términos, verá que todos estos se han agregado automáticamente a su complemento, lo que le ahorra mucho tiempo.

Parte 6: Asigne términos VPF a nuevos productos manualmente

Paso 1: crear productos

Si está agregando nuevos productos después de haber cargado el CSV, puede asignarles términos manualmente. Una vez que haya creado sus nuevos productos y haya seguido los pasos generales (como agregar una imagen destacada, una galería, una descripción, un título y un precio), abra cada uno de ellos individualmente.

Paso 3: Asigne el término VPF al producto

Desplácese hacia abajo hasta la parte inferior de la página de su producto. Allí, puede elegir a qué marca, modelo, año y motor pertenece su producto. Repita este paso para cada uno de los nuevos productos.

Parte 7: Incluir código corto en la página de la tienda y modificar su apariencia

Paso 1: Abra la página de la tienda con Visual Builder

Una vez que todos sus productos estén vinculados a los términos adecuados, es hora de agregar la búsqueda de piezas de vehículos a la página de su tienda. Para hacer eso, habilite primero Visual Builder.

Paso 2: agregue una fila de una columna

Luego, agregue una columna con una fila al comienzo de la segunda sección de su página.

Paso 3: quitar el relleno superior de la sección

Para crear un resultado más atractivo, quite el relleno superior de la segunda sección en la que está trabajando.

Paso 4: agregue un nuevo módulo de texto con código abreviado de búsqueda de piezas de vehículos a la columna

A continuación, agregue un Módulo de texto a la fila que acaba de crear y coloque el siguiente código abreviado en el cuadro Contenido:

01
[woo_vpf_filter title="Find Vehicle Parts" view="H/V" label_make="Select Make" label_model="Select Model" show_year="true" label_year="Select Year" show_engine="true" label_engine="Select Engine" show_category="true" label_category="Select Category" show_keyword="false" label_keyword="Product Name" show_my_vehicles="" label_search="Search" label_reset_search="Reset Search"]

Esto hará que la búsqueda de piezas de vehículos aparezca en su página.

Paso 5: Configuración del texto del enlace

Afortunadamente, podemos hacer algunas modificaciones de apariencia a este shortcode usando las opciones integradas de Divi. Lo primero que haremos será cambiar el texto del enlace usando la siguiente configuración:

  • Fuente del enlace: Montserrat
  • Tamaño del texto del enlace: 13px
  • Color del texto del enlace: #1e7bd0

Paso 6: Ajustes de Texto del Título 2

También cambiaremos la configuración del texto del encabezado 2 usando las siguientes configuraciones que coinciden con el paquete de diseño de reparación de automóviles :

  • Título 2 Fuente: Montserrat
  • Encabezado 2 Alineación de texto: Centro
  • Encabezado 2 Tamaño del texto: 33px
  • Título 2 Color del texto: #f7a439
  • Heading 2 Línea Altura: 2.2em

Paso 7: Dimensionamiento

A continuación, reduciremos el ancho de la búsqueda de piezas de vehículos usando un ancho de ’61 %’ en lugar de ‘100 %’ para escritorio. El ancho para tableta y teléfono debe permanecer ‘100%’. Utilice también una alineación de módulo central.

Paso 8: CSS personalizado para botón

Por último, pero no menos importante, queremos que los botones coincidan con el paquete de diseño de reparación de automóviles también. Desafortunadamente, dado que este es un complemento de terceros, no podemos cambiar eso con Divi Builder . Es por eso que agregaremos algunas líneas de código CSS adicionales yendo a su Tablero de WordPress> Divi> Opciones de tema> Desplazarse hacia abajo en la pestaña General> Agregar las siguientes líneas de código CSS al cuadro CSS personalizado:

01
02
03
04
05
06
07
08
09
10
11
12
13
.woo-vpf-field input[type="submit"]
{
border: none;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 10px;
padding-top: 10px;
background: #F7A439;
color: white;
text-transform: uppercase;
font-weight: bold;
border-radius: 2px;
}

Pensamientos finales

En esta publicación de blog de caso de uso, le mostramos cómo agregar la búsqueda de piezas de vehículos a  la página de la tienda del paquete de diseño de reparación de automóviles de Divi . Este caso de uso es parte de nuestra iniciativa Divi en curso, en la que nuestro equipo de diseño comparte contigo un nuevo paquete de diseño cada semana. Si tienes alguna pregunta; ¡Asegúrate de dejar un comentario en la sección de comentarios a continuación!