[Support request] Best Practice Styling WooCommerce and GP

[Daniel]

Hello everyone,

I am taking my first steps to use GP and WooCommerce to create an eCommerce site and wondered if anyone had any tips and tricks regarding best practices styling when using the two together?
My plan is to use GP’s customiser for the basic styling and layout and then I have disabled WooCommerce’s styles using add_filter( ‘woocommerce_enqueue_styles’, ‘__return_empty_array’ );
Only problem is, when I disable all WooCommerce’s styles, the fancy filter sliders and tabs don’t display correctly.
Am I going down the right path, or is there a quicker way to override WooCommerce’s styling without having to do it all from scratch?
I would like WooCommerce to follow the styling I do in GP. Is there an extra plugin I need to style WC? Or is it just a case of overriding WC CSS in my stylesheet.

I’m trying to work out the cleanest method possible, without having to write all of the WooCommerce CSS again.

Please let me know your best tips and practices.

Thanks

[Tom]

Hi there,

I’m working on a WC add-on that will use the GP button styling etc..

Are there specific styles you’re wanting to use from GP? Buttons for example?

[Daniel]

Sounds good Tom, when can we expect to see this?
Would be good if your plugin, could disable the Woo Styles (apart from the JS sliders and tabs).
Options for products would be amazing. But if we could set general styles in GP that would follow through to our Woo pages, would be a great addition.
I did have a play with Storefront, but I started again back in GP, however, in StoreFront there is a great Powerpack Plugin that lets you style Woo elements very easy, but it’s not as good as the GP customiser, saying that GP customiser has no control on Woo.

Any other tips people?

D

[Tom]

No timeline yet, but soon.

I’ll be sure to look at how Storefront does things 🙂

[Daniel]

I think what would be better Tom, is to have an extension add-on for GP Premium that when you enable it, it disables WooCommerce default styles. When enabled Woo should follow GP Premiums default styles for buttons and text, however in the GP Premium customiser, it would be great to have a tab for WooCommerce specific styling.

Storefront is not as good as GP, however the Storefront Powerpack extension does allow for deep customisation. I don’t think we need this for GP, but to have some basic control of CSS for WooCommerce within GP would really be good for the GP community, as WooCommerce is the perfect companion when wanting to build eCommerce sites.

Would be great to see some better integration soon.

[Tom]

Really appreciate the feedback, thank you! 🙂

[celito]

Anticipating this add-on too with great excitement!

[Warner]

Hi Tom,

A dedicated WC add-on would be great and like Celito I am exited and can’t wait for the release.

And if I might ask, could you add something like this to the GP parent theme functions.php or WC add-on;

add_action( 'wp_enqueue_scripts', 'generate_remove_woocommerce_styles_and_scripts');

if ( ! function_exists( 'generate_remove_woocommerce_styles_and_scripts' ) ) :
/**
 * Remove WooCommerce stylesheets and scripts from non-WooCommerce pages
 * @since <strong>...</strong>
 */
function generate_remove_woocommerce_styles_and_scripts()
{
	/**
	 * Check to see if the WooCommerce plugin is active.
	 *
	 * is_woocommerce - Returns true if on a page which uses WooCommerce templates (cart and checkout are standard pages with shortcodes and thus are not included).
	 * This conditional function is located in wp-content/plugins/woocommerce/includes/wc-conditional-functions.php -> lines: 17 - 23.
	 *
	 * @see is_woocommerce()
	 * @return bool
	 **/
	if ( function_exists( 'is_woocommerce' ) ) {

		/**
		 * Check to see if it is NOT (!) a WooCommerce page and NOT the Cart- and Checkoutpage.
		 *
		 * @return bool
		 * Either true : false
		 **/
		if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {

			/**
			 * Since the if statement returned TRUE on our question if the current page is NOT a WC-page we will start to dequeue the WC styles and scripts.
			 *
			 * @see get_styles()
			 * @see register_scripts()
			 * Both functions are located in wp-content/plugins/woocommerce/includes/class-wc-frontend-scripts.php -> lines: 62- 91 and 175 - 310
			 **/

			// Dequeue WooCommerce stylesheets.
			wp_dequeue_style( 'woocommerce-layout' );
			wp_dequeue_style( 'woocommerce-smallscreen' );
			wp_dequeue_style( 'woocommerce-general' );

			// Dequeue WooCommerce scripts.
			wp_dequeue_script( 'wc-cart-fragments' );
			wp_dequeue_script( 'wc-add-to-cart' );
			wp_dequeue_script( 'woocommerce' );
		}
	}
}
endif;

WARNING: Please, do not blindly copy/paste this function into your (child)theme on a live site, but test it first on a local/staging setup. I am not a hardcore PHP/WP developer!

One could always add this to a child-theme, but having it the parent theme might improve the front-end loading and rendering a bit. Something simlar could be done for Bbpress and BuddyPress as well.

While i am at it; Would it be a idea to have a dedicated thread where your users could share GP snippet like this?

[Tom]

Ah, so basically remove any WC resources on pages that aren’t WC?

WC themselves should really do this.. The only issue I can foresee there is if people are displaying products with shortcodes etc.. Then those conditionals would be true, and those scripts would be removed even when necessary.

[Warner]

Lol…

You are absolutely right Tom. I completely forgot the shortcodes you can use on any page or post. Imagine the extra support request you will get when blindly implementing this.

For the next time I will stop and think before giving suggestions!

On a other topic: Can you send private replies in the support forum or is there a email address I can use to send you some DO login credentials?

Thx again!

[Tom]

If you know for a fact you’ll only be using the built in WC pages, then you should add those functions. Removing resources where not necessary is never a bad thing.

You can use the contact page to send credentials. What are they for?

[Joona]

This will be a super useful feature for GP!

[David]

So looking forward to the Woo add-on.
Staying on topic, i use the Statement child them over GP with Woo and the Elementor plugin.
Styling has been set using the great GP customiser as default throughout.
Customisation of Woo has been a slow step at a time set of improvements such as type alignment and button colours. Elementor has been great for creating custom sections for products, although i dont rate their support! (Maybe Tom sets the bar too high).
For me personally i would like to have greater control over the single product page layout and to add some rollover functionality to the shop thumbnails.

I have been studying the woo single product page hooks to see if i can use this to improve the default layout. The following link is reasonably useful although i haven’t check whether anything has been deprecated since woo 3.0.

https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

[Tom]

I think the GP WC add-on will definitely help in regards to that. Nothing fancy (yet), but much more control over the product page layout and the individual product layout 🙂

[wekhter]

I was looking through the support forum to see any tips about styling certain woocommerce elements and I’m glad I found this thread 🙂 Looking forward to the addon!

As a suggestion, it would be great to be able to set and style the shop page header, similar to how the blog addon lets you set up the blog header. In the meantime, is there a recommended method for adding a page header to the WooCommerce shop page?

[Author]

Posts