Make WordPress Core

Opened 23 months ago

Closed 23 months ago

Last modified 23 months ago

#56337 closed defect (bug) (invalid)

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

Reported by: umesh84's profile umesh84 Owned by:
Milestone: Priority: normal
Severity: normal Version: 6.0
Component: Bundled Theme Keywords: has-screenshots has-patch
Focuses: ui, css Cc:

Description

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

Attachments (3)

Screenshot 2022-08-05 at 9.42.43 AM.png (1.6 MB) - added by umesh84 23 months ago.
For better understanding I have attached a screenshot
56337.diff (667 bytes) - added by tahmidulkarim 23 months ago.
Patch created.
56337.1.diff (733 bytes) - added by tahmidulkarim 23 months ago.
Added conditions to check WC version and if is_product function exists

Download all attachments as: .zip

Change History (16)

@umesh84
23 months ago

For better understanding I have attached a screenshot

@tahmidulkarim
23 months ago

Patch created.

#1 @tahmidulkarim
23 months ago

  • Keywords has-patch added; needs-patch removed

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.

Last edited 23 months ago by tahmidulkarim (previous) (diff)

#2 @sabernhardt
23 months ago

  • Keywords changes-requested added; needs-design removed
  • Summary changed from Theme Twenty Eleven Single Product page in description tab content alignment issue to Twenty Eleven: alignment in WooCommerce single product page's description tab content

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() ) ) {

#3 @tahmidulkarim
23 months ago

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
23 months ago

Added conditions to check WC version and if is_product function exists

#4 @sabernhardt
23 months ago

  • Keywords needs-testing added; changes-requested removed
  • Milestone changed from Awaiting Review to 6.1

#5 @sabernhardt
23 months ago

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() )
	) {

#6 @mukesh27
23 months ago

  • Keywords needs-refresh added

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() )

This ticket was mentioned in PR #3071 on WordPress/wordpress-develop by mukeshpanchal27.


23 months ago
#7

  • Keywords needs-refresh removed

#8 @sabernhardt
23 months ago

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' ) ) )

#9 @davidbaumwald
23 months ago

@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?

#10 @sabernhardt
23 months ago

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.

#11 @davidbaumwald
23 months ago

  • Milestone 6.1 deleted
  • Resolution set to invalid
  • Status changed from new to closed

@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.

#13 @sabernhardt
23 months ago

  • Keywords needs-testing removed

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

Ticket for Twenty Twenty-One: #56366

Note: See TracTickets for help on using tickets.