Support » Plugin: WooCommerce » Grid problem woocommerce – bootstrap 4.1

  • Resolved mcamposs

    (@mcamposs)


    Hello,

    I have grid issues on the payment page, with the shortcode [woocommerce_checkout].
    I am using bootstrap 4.1 in the frontend of my theme.

    Any ideas?

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 16 total)
  • What’s the problem exactly? Doesn’t look bad.

    Gracias por revisarlo, si te fijas el ancho de las columnas es muy pequeño, solo en la parte de abajo se vé bien. La probé en Chrome, Mozilla y Avast.
    Mira por favor la imagen:
    https://1ce.org/1#H1Adi2duX

    me enviaste la página equivocada. Ni siquiera estoy seguro de lo que enviaste. LOL. Dijiste que era tu página de carrito.

    esta página no?
    https://mesabienesraices.com/carro-de-compras/#

    Disculpa, esta es la página:
    https://mesabienesraices.com/pagina-de-pago/
    la cual tiene este shortcode [woocommerce_checkout]
    y ésta es la imagen online:
    https://1ce.org/1#H1Adi2duX

    Esa página que pones, es el tícket anterior. Este es otro tícket.

    lo tengo. Bueno, estoy en mi teléfono móvil ahora mismo. Puedo mirar por la mañana si nadie más te ayuda

    Gracias!!!

    Hello, any ideas?
    Hola, algunas ideas?

    lo siento. un minuto

    No puedo ver ningún producto para agregar al carrito para acceder a la página de pago. Las imágenes no me hacen bien. Necesito agregar al carro y no veo dónde hacer eso. ¿Me estoy perdiendo de algo?

    Disculpa, empieza la secuencia en:
    1.- https://mesabienesraices.com/producto/mangueras-de-latex-antitorsion, Añadir al Carrito
    2.- Después le das Ver Carrito, te manda a la página https://mesabienesraices.com/carro-de-compras/
    3.- Click a Finalizar la compra, te manda a la página https://mesabienesraices.com/pagina-de-pago/ ésta última página es la del problema de rejilla.
    Esa última página es la de la imagen: https://1ce.org/1#H1Adi2duX
    Si te fijas todas las páginas anteriores, funcionan de maravilla, solo ésta última presenta problemas de rejillas.
    Cualquier ayuda, será muy apreciada.
    Gracias.

    Su tema tiene un ancho máximo de solo 8.3%. Eso no es bueno. Quitate eso.
    ver mi captura de pantalla
    Haga clic aquí

    Estimado, gracias por tu respuesta.
    Pero no es así. Si así lo fuera, todas las otras páginas mostrarían el mismo error. Cuando seguiste la secuencia de páginas que te mandé, de seguro observaste que no había ningún error y el formato de páginas es el mismo para todas sin excepción, puesto es una plantilla.
    Igualmente en ésa página de error, se observa que la parte de abajo que dice “Tu Pedido” se muestra perfecto, solo la parte superior tiene ese problema.
    El col1 y col2 (8.3%) que se muestra es del form de woocommerce, y no del theme puesto yo publico the_content sin rejillas.

    	<div class="container my-1 bg-white">
    		<div class="row">
    			<div class="col-12 col-md-9">
    				<div class="clearfix mt-3"></div>
    				<div class="row mr-2 ml-2 pb-3">
    				<?php
    					if ( have_posts() ) :
    					  while ( have_posts() ) : 
    						the_post(); ?>
    								<div class="the_title_page"><h3><?php the_title(); ?></h3></div>
    								<div class="clearfix"></div>
    								<p class="card-text"><?php the_content(); ?></p>
    							   <?php
    					  endwhile; 
    					endif;
    				?>
    				</div>
    			</div>
    			<div class="col-12 col-md-3 mt-3">
    				<?php if ( is_active_sidebar( 'sidebar-derecho' ) ) : ?>
    					<div id="widget-area" class="widget-area">
    						<?php dynamic_sidebar( 'sidebar-derecho' ); ?>
    					</div>
    				<?php endif; ?>
    			</div>
    		</div>
    	</div>

    Es exactamente así. Ninguna otra página usa esos selectores col-1 y col-2 distintos a la salida.

    No veo una cuadrícula en esa página

    esto es lo que dijiste “Tengo problemas con la red en la página de pago”

    Estimado, después de hacer pruebas y revisar el código, te muestro que el woocommerce si pone en su salida col-1 y col-2:
    Revisa el archivo plugins/woocommerce/templates/checkout/form-checkout.php en las líneas 41 al 49:

    <div class="col2-set" id="customer_details">
    	<div class="col-1">
    		<?php do_action( 'woocommerce_checkout_billing' ); ?>
    	</div>
    	<div class="col-2">
    		<?php do_action( 'woocommerce_checkout_shipping' ); ?>
    	</div>
    </div>

    Y puesto mi template usa Bootstrap 4.1, col-1 representa el 8.33% del div contenedor.
    Entonces probé a quitar la clase de esos div, pero se pierde el estilo del form.
    Esta es la imagen del form sin estilo cuando se eliminan esas clases:
    https://1ce.org/1#H18oosYuQ
    Cómo corregir ese problema?

    Hola!
    Entonces no es compatible WooCommerce con Bootstrap?
    Hay que buscar otras soluciones de ecommerce?
    Saludos

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Grid problem woocommerce – bootstrap 4.1’ is closed to new replies.