[Resuelto] Errors in checkout page of woocommerce

[Autor]

Mensajes

[ericL-12]

Estoy tratando de:

The checkout fields (woocommerce) design is broken when Toolset is activated.

URL de (mi) sitio web donde aparece el problema:

hidden link

Yo esperaba ver:

hidden link

En vez de eso, obtuve:

hidden link

[Nigel Supporter Languages: Inglés (English ) Español (Español ) Timezone: Europe/London (GMT+01:00)]

I logged in and tried to test the checkout page—I'm guessing some stylesheet is loaded by Toolset which is clashing with the normal styles—but the shop page is empty and if I visit a single product page the Add-to-cart button is inactive.

What do I need to do to be able to test the cart?

[ericL-12]

Hello Nigel,

Variation must be selected. Try with this URL: hidden link

Thank you1

[Nigel Supporter Languages: Inglés (English ) Español (Español ) Timezone: Europe/London (GMT+01:00)]

It looks like the problem arises because of a conflict between the WC checkout styles for columns and those used by Bootstrap 4 (see screenshot).

You can go to Toolset > Settings and change the Bootstrap settings to say that this site is not using Bootstrap.

[ericL-12]

Hello,

I need bootstrap for my views... Ano other option to fix it?

[ericL-12]

I've managed to solve the issue you mentioned with some css, but there is still styles that are broken. Nothing is aligned etc...

CSS I added is:

#customer_details div.col-1 {
	max-width: 100% !important;
}

Screenshot of result attached.

[Nigel Supporter Languages: Inglés (English ) Español (Español ) Timezone: Europe/London (GMT+01:00)]

I think an easier approach may be to simply dequeue Bootstrap on the checkout page, so it will load on other pages where you may need it, but not on this page that is causing you problems.

So you could add the following snippet to Toolset > Settings > Custom Code:

/**
 * Don't enqueue Bootstrap on WC checkout page
 */
function ts_dequeue_bootstrap(){

  if ( is_page( 'finalizar-compra' ) ) {


    // dequeue Bootstrap CSS
    function ts_dequeue_bootstrap_css(){
      wp_dequeue_style( 'toolset_bootstrap_styles' );
    }
    add_action( 'wp_print_styles', 'ts_dequeue_bootstrap_css' );

    // dequeue Bootstrap JS 
    function ts_dequeue_bootstrap_js(){
      wp_dequeue_script( 'toolset_bootstrap' );
    }
    add_action( 'wp_print_scripts', 'ts_dequeue_bootstrap_js' );    

  }

}
add_action( 'wp_enqueue_scripts', 'ts_dequeue_bootstrap', 100 );

Can you try that?

[ericL-12]

Hello,

thanks. I did it but there are still some errors. Screenshot attached.

Thanks again

[Nigel Supporter Languages: Inglés (English ) Español (Español ) Timezone: Europe/London (GMT+01:00)]

I checked your page and see that Bootstrap is still added to the page.

I double-checked and see that the handles for enqueuing Bootstrap were changed with BS4 so I updated the code so that it dequeues BS3 and BS4 on your checkout page:

/**
 * Don't enqueue Bootstrap on WC checkout page
 */
function ts_dequeue_bootstrap(){
 
  if ( is_page( 'finalizar-compra' ) ) {
  
    // dequeue Bootstrap CSS
    function ts_dequeue_bootstrap_css(){
      wp_dequeue_style( 'toolset_bootstrap_styles' );
      wp_dequeue_style( 'toolset_bootstrap_4' );
    }
    add_action( 'wp_print_styles', 'ts_dequeue_bootstrap_css' );
 
    // dequeue Bootstrap JS 
    function ts_dequeue_bootstrap_js(){
      wp_dequeue_script( 'toolset_bootstrap' );
      wp_dequeue_script( 'toolset_bootstrap_4' );
    }
    add_action( 'wp_print_scripts', 'ts_dequeue_bootstrap_js' );    
 
  }
 
}
add_action( 'wp_enqueue_scripts', 'ts_dequeue_bootstrap', 100 );

Can you please try with the updated code?

[ericL-12]

My issue is resolver, thank you so much Nigel. Best support ever