Colocar resumen de pedido a la derecha de formulario checkout en woocommerce (sin plugin)

En la actualidad la mayoría de temas para woocommerce presentan una característica que es colocar el resumen de pedido a la derecha del formulario donde se ingresan los datos de factura, pero ¿qué pasa con el resto de los temas? por ejemplo el famoso tema hello o generatepress

Cuando instalamos uno que no está diseñado para tiendas en línea lo que hace woocommerces es cargar la plantilla que viene por defecto para checkout, pero esta presenta el formulario de factura en una columna izquierda y el formulario para envío en la columna derecha, enviando hasta el final el resumen de pedido, pero el detalle es que nos coloca un enorme espacio en blanco ya que el formulario de envío se visualiza hasta activar la casilla enviar a una dirección diferente.

Esta es la plantilla por defecto de woocommerce

Bien para lograr colocar el resumen de pedido a la derecha existen varias formas, desde luego por medio de algún plugin, a través de css, pero de la forma que hoy les quiero hablar es modificar directamente el archivo de plantilla de woocommerce

Antes que nada es muy importante resaltar que esta modificación no se hará directamente en wocoomerce sino a través de nuestro tema activo, el cual se recomienda sea un tema hijo

Aclarado este punto importante lo que vamos a hacer es lo siguiente, navegas hasta la ubicación del archivo form-checkout.php que se encuentra en la ruta … \wp-content\plugins\woocommerce\templates\checkout\form-checkout.php

Vamos a copiar el archivo y ahora nos dirigimos a la ubicación de nuestro tema hijo que tengamos activo para nuestro sitio, posteriormente creamos una nueva carpeta o directorio y lo nombramos woocommerce

Abrimos nuestro nuevo directorio woocommerce y ahora creamos una nueva carpeta y la nombramos checkout

Abrimos nuevamente nuestro nuevo directorio y finalmente pegamos en esta ruta nuestro archivo copiado

Abre el archivo con tu editor favorito y vamos a analizar el código

Lo que podemos observar es que dentro de «col-1» (que vendría siendo la columna izquierda en nuestra plantilla) se está colocando el formulario de facturación y en «col-2» (la columna derecha) aparece el formulario para envío y al final el resumen de pedido

Una vez que ya identificamos los elementos en nuestro código en el archivo form-checkuout-php vamos a mover la línea que tenemos en «col-2» debajo de la línea que tenemos en «col-1», quedando de la siguiente manera

Guardamos y vamos a nuestro formulario de pago en nuestro sitio, lo que notaremos es que ahora la columna de la derecha aparece vacía

Bien volvamos a nuestro código, ahora vamos a cortar las líneas que se encuentran entre <?php endif; ?> y </form> y las pegamos dentro del div «col-2»

Nuestro código final debe quedar de la siguiente manera

Guardamos y una vez más regresamos a nuestro formulario de pago en nuestro sitio, si todo ha salido bien entonces tendremos algo parecido a la siguiente imagen

Rénival Web

Rénival Web

Nuestra misión es poner en marcha el sitio web para tu negocio sin complicaciones