[Resolved] User Registration Checkout alignment issues

[Author]

Posts

[Jay]

I've managed to setup my registration page but when the user comes to the checkout page the fields are very small and aligned to the extreme left and right. I don't know where to go to fix this issue. Any help would be appreciated.

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

Can you please share the link to this checkout page? I'll be in a better position to troubleshoot the styles and suggest the next steps, accordingly.

regards,
Waqar

[Jay]

Hello Waqar

Are these tickets open to the public or is what is posted on here hidden?

Thanks
Tyrone

[Waqar]

Thanks for writing back.

Normal messages in the support forum are public, but, I've set your next reply as private so that you can share the website's link, privately.

[Waqar]

Thank you for sharing the link.

The conflict in the styles is a result of a compatibility issue between the WooCommerce and the Bootstrap library styles, as explained here:
https://toolset.com/errata/bootstrap-4-columns-classes-col-1-and-col-2-conflicts-with-woocommerce/

If you're not using the Bootstrap script and style library on your website, you can select the option "This site is not using Bootstrap CSS" at WP Admin -> Toolset -> Settings -> General -> Bootstrap loading.

In case, you'd like to keep loading the Bootstrap library, you can exclude it from the WooCommerce checkout page, using the following code:

function dequeue_bootstrap(){
	// if checkout page
	if ( is_checkout() ) {
		// dequeue Bootstrap CSS
		function dequeue_bootstrap_css(){
			wp_dequeue_style( 'toolset_bootstrap_styles' );
			wp_dequeue_style( 'toolset_bootstrap_4' );
		}
		add_action( 'wp_print_styles', 'dequeue_bootstrap_css' );

		// dequeue Bootstrap JS 
		function dequeue_bootstrap_js(){
			wp_dequeue_script( 'toolset_bootstrap' );
			wp_dequeue_script( 'toolset_bootstrap_4' );
		}
		add_action( 'wp_print_scripts', 'dequeue_bootstrap_js' );
	}
}
add_action( 'wp_enqueue_scripts', 'dequeue_bootstrap', 100 );

The above code snippet can be included through either Toolset's custom code feature ( ref: https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/ ) or through the active theme's "functions.php" file.

I hope this helps and please let me know if you need any further assistance around this.

[Jay]

Thanks very much for that help that seems to have solved the issue. What is the consequence of disabling Bootstrap?

[Waqar]

Thanks for the update and glad that it is resolved.

The use of the Bootstrap library is optional with Toolset plugins. If you find your active theme's design components adequate for your need, then you don't have to enable the loading of Bootstrap through Toolset plugins.

The impact on Toolset's features will be minor and the most prominent one that I can think of is that you won't be able to drag and drop the Toolset Forms fields into grid/columns or use the Bootstrap grid layout when working with the classic/legacy views.

[Jay]

My issue is resolved now. Thank you!