search

woocommerce / woocommerce

A customizable, open-source ecommerce platform built on WordPress. Build any commerce solution you can imagine.
https://woocommerce.com
9.38k stars 10.76k forks source link

[GlobalStep] For Twenty Twenty-two theme, "Dropdown" option is misaligned on "Variable Product" page. #31686

Open gglobalstep opened 2 years ago

gglobalstep commented 2 years ago

Prerequisites

Describe the bug

For Twenty Twenty-two theme, "Remember me" checkbox for "Login to existing account" is misaligned on "Checkout" page.

Expected behavior

For Twenty Twenty-two theme, "Dropdown" option should be properly aligned on on "Variable Product" page.

Actual behavior

For Twenty Twenty-two theme,"Dropdown" option is misaligned on "Variable Product" page.

Steps to reproduce

  1. Create any test site using JN site.
  2. Install and activate all the required plugins
  3. Complete the onboarding setup wizard.
  4. Select Twenty Twenty Two theme.
  5. Add some products.
  6. Go to shop page on frontend.
  7. Select any "Variable product".
  8. Observe that "Dropdown" option is misaligned on "Variable Product" page.

Screenshot:

3#31686

WordPress Environment

Woocommerce Version : WooCommerce 6.1.1 Wordpress version: 5.9 RC3

PC: Windows 10 Chrome(Version 97.0.4692.71) Firefox(Version 96.0.1)

Isolating the problem

` ### WordPress Environment ### WC Version: 6.1.1 REST API Version: ✔ 6.1.1 WC Blocks Version: ✔ 6.7.1 Action Scheduler Version: ✔ 3.4.0 WC Admin Version: ✔ 3.0.3 Log Directory Writable: ✔ WP Version: 5.9-RC3 WP Multisite: – WP Memory Limit: 256 MB WP Debug Mode: ✔ WP Cron: ✔ Language: en_US External object cache: – ### Server Environment ### Server Info: Apache/2.4.52 (Unix) OpenSSL/1.0.2g PHP Version: 7.4.27 PHP Post Max Size: 1 GB PHP Time Limit: 30 PHP Max Input Vars: 5000 cURL Version: 7.47.0 OpenSSL/1.0.2g SUHOSIN Installed: – MySQL Version: 5.7.33-0ubuntu0.16.04.1-log Max Upload Size: 512 MB Default Timezone is UTC: ✔ fsockopen/cURL: ✔ SoapClient: ✔ DOMDocument: ✔ GZip: ✔ Multibyte String: ✔ Remote Post: ✔ Remote Get: ✔ ### Database ### WC Database Version: 6.1.1 WC Database Prefix: wp_ Total Database Size: 6.19MB Database Data Size: 4.62MB Database Index Size: 1.57MB wp_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_order_itemmeta: Data: 0.05MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_actionscheduler_actions: Data: 0.05MB + Index: 0.11MB + Engine InnoDB wp_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_actionscheduler_logs: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_comments: Data: 0.02MB + Index: 0.09MB + Engine InnoDB wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_options: Data: 3.47MB + Index: 0.09MB + Engine InnoDB wp_postmeta: Data: 0.16MB + Index: 0.14MB + Engine InnoDB wp_posts: Data: 0.08MB + Index: 0.06MB + Engine InnoDB wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_wc_admin_notes: Data: 0.05MB + Index: 0.00MB + Engine InnoDB wp_wc_admin_note_actions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB wp_wc_rate_limits: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB ### Post Type Counts ### attachment: 28 page: 8 post: 3 product: 21 product_variation: 10 revision: 2 shop_coupon: 2 shop_order: 12 shop_order_refund: 1 wp_global_styles: 1 wp_navigation: 1 ### Security ### Secure connection (HTTPS): ✔ Hide errors from visitors: ✔ ### Active Plugins (6) ### Query Monitor: by John Blackbourn – 3.8.2 Companion Plugin: by Osk – 1.21 Jetpack: by Automattic – 10.5 WooCommerce Blocks: by Automattic – 6.7.1 WooCommerce: by Automattic – 6.1.1 WordPress Beta Tester: by Peter Westwood Andy Fragen – 3.1.4 ### Inactive Plugins (2) ### Akismet Anti-Spam: by Automattic – 4.2.1 Hello Dolly: by Matt Mullenweg – 1.7.2 ### Dropin Plugins (1) ### db.php: Query Monitor Database Class ### Settings ### API Enabled: – Force SSL: – Currency: USD ($) Currency Position: left Thousand Separator: , Decimal Separator: . Number of Decimals: 2 Taxonomies: Product Types: external (external) grouped (grouped) simple (simple) variable (variable) Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog) exclude-from-search (exclude-from-search) featured (featured) outofstock (outofstock) rated-1 (rated-1) rated-2 (rated-2) rated-3 (rated-3) rated-4 (rated-4) rated-5 (rated-5) Connected to WooCommerce.com: – ### WC Pages ### Shop base: #7 - /shop/ Cart: #8 - /cart/ Checkout: #9 - /checkout/ My account: #10 - /my-account/ Terms and conditions: ❌ Page not set ### Theme ### Name: Twenty Twenty-Two Version: 1.0 Author URL: https://wordpress.org/ Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme WooCommerce Support: ✔ ### Templates ### Overrides: – ### Action Scheduler ### Complete: 68 Oldest: 2022-01-19 06:50:56 +0000 Newest: 2022-01-19 11:00:53 +0000 Pending: 1 Oldest: 2022-01-20 08:57:53 +0000 Newest: 2022-01-20 08:57:53 +0000 ### Status report information ### Generated at: 2022-01-19 13:37:30 +00:00 `
NidhiDhandhukiya commented 1 year ago

Hello @gglobalstep

I have checked this issue in my local, Yes i can able to reproduce this issue.

I have checked in chrome, Firefox and safari browsers.

Solution as per me :- According to me the reason behind this issue is it will add this dropdown values in the table structure so as per the length of the name the alignment should be changed so if we want to solve this we have to give some max-width value to that label.

For example .woocommerce div.product form.cart table.variations th { max-width: 100px; width: 100%; text-align: right; }

After applying this code the alignment should be looks like this. I have attached screenshot after adding this css how it looks.

CleanShot 2022-10-21 at 12 00 29@2x