Twenty Eleven: alignment in WooCommerce single product page's description tab content

[umesh84]

When we open a single product page Theme Twenty Eleven description tab content alignment issue

1: Go to Theme Twenty Eleven
2: Download woocommerce plugin
3: Active woocommerce plugin
4: Add Product description and image
5: Go single product page

[umesh84]

For better understanding I have attached a screenshot

[tahmidulkarim]

Patch created.

[tahmidulkarim]

The class - singular was getting added to the products page and that along with the entry-content class added a custom width of 68.9% which was causing the issue. Here is a screenshot - ​https://prnt.sc/0zsasKZp36Jz

Removing the singular class solves the problem. So adding a condition to check for Woo single product page in function.php will remove the class. I have attached the patch above.

[sabernhardt]

Thanks for the report and the patch!

I do not recommend aligning large-ish images to the left (or right) of text because that often involves floating, but changing the container width would help.

Removing the singular body class seems to fix the description tab content width (and the sidebar when the theme uses it) on WooCommerce product pages. However, before a theme can call is_product(), it needs to verify that WooCommerce is activated to avoid causing errors on other sites.

It could check if the function exists:
if ( is_singular() && ! is_home() && ! is_page_template( 'showcase.php' ) && ! is_page_template( 'sidebar-page.php' ) && ! ( function_exists( 'is_product' ) && is_product() ) ) {

And possibly check for a WooCommerce version, in case someone creates a different is_product function:
if ( is_singular() && ! is_home() && ! is_page_template( 'showcase.php' ) && ! is_page_template( 'sidebar-page.php' ) && ! ( defined( 'WC_VERSION' ) && function_exists( 'is_product' ) && is_product() ) ) {

[tahmidulkarim]

Aligning images to the left or right works on other latest themes. This problem seems to occurs only in the Theme Twenty Eleven.

The function is_product() do throw an error when Woocommerce is disabled. I have added the condition to check the WC version and if the function actually exists. Thank you for your suggestion. I will attached an updated patch.

[tahmidulkarim]

Added conditions to check WC version and if is_product function exists

[sabernhardt]

For a temporary fix until the theme is updated, you could add this in the Customizer's Additonal CSS. Then if the theme removes the singular class, this would not be necessary (nor valuable).

.singular div.product .woocommerce-tabs .entry-content {
  width: auto;
}

Before committing the patch, we could consider splitting the conditions on separate lines for readability, too:

	if ( is_singular()
		&& ! is_home()
		&& ! is_page_template( 'showcase.php' )
		&& ! is_page_template( 'sidebar-page.php' )
		&& ! ( defined( 'WC_VERSION' ) && function_exists( 'is_product' ) && is_product() )
	) {

[mukesh27]

Hi there!

@sabernhardt Thanks for the patch suggestion. Instead of three checks for conditions can simplify it with two checks only? class_exists( 'WooCommerce' ) Check if WooCommerce is activated and is_product() for the product page?

&& ! ( class_exists( 'WooCommerce' ) && is_product() )

Trac ticket: https://core.trac.wordpress.org/ticket/56337

[sabernhardt]

Simplifying the condition like that probably would be safe. The WooCommerce class has existed since WC 3.0.0 (April 2017), and is_product() was in that version, too. (See ​WooCommerce class and ​is_product function.)

Another option could use the Core is_singular() function found within is_product():

&& ! ( class_exists( 'WooCommerce' ) && is_singular( array( 'product' ) ) )

[davidbaumwald]

@sabernhardt This would appear to me to be a WooCommerce issue. Is there a specific reason that Core should be fixing this instead of WC themselves?

[sabernhardt]

Twenty Twenty-One adjusted for WooCommerce in ​its stylesheet, but maybe this is better to fix in the plugin. It likely would be updated sooner than Twenty Eleven.

They have a 'class-wc-twenty-eleven.php' theme support file where the singular body class could be removed if it's a product page.

[davidbaumwald]

@sabernhardt Yeah, I saw this as well when I searched src for "woocommerce" to see if there were any other carveouts. I'm going to close this as I don't think Core should be handling anything for third-party plugins except those maintained solely by .org.

I think a follow-up ticket should be created to discuss possibly removing the WC-specific CSS as well. I don't think Core should have that code as it would need to be supported forever. This gets worse as WC evolves and changes its code which then requires more adjustments by Core.

@umesh84 Thanks for the report. Since this is a bug with a third-party plugin, you should open an issue(if it doesn't already exist) at ​https://github.com/woocommerce/woocommerce/issues.

Closed as per David comment: https://core.trac.wordpress.org/ticket/56337#comment:11

[sabernhardt]

WooCommerce issue:
​https://github.com/woocommerce/woocommerce/issues/34219

Ticket for Twenty Twenty-One: #56366