change CSS Woocommerce checkout field

  • Resolved Fattura24

    (@davideiandoli)


    2 years ago

    Hi,
    in my plugin I customised the checkout and added a checkbox
    to this element I apply the class ‘form-row-wide’:

    .form-row-wide {
   clear: both;
   width: 100%;
}

    The result is that the blank space after this field is too much.
    I could resolve it by editing ‘form-row-wide’ in a way like this:

    .form-row-wide {
   clear: initial; // or 'unset' as well
   width: 100%;
}

    I didn’t find the way to do this in my plugin. Thanks for any help

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Igor H

    (@ihereira)

    Hi,

    For me to make sure I am understanding correctly, do you mean this space after the field? How would you like the text to appear?


    Link to image: https://snipboard.io/ftz6qE.jpg

    If this is not what you mean, kindly send a screenshot, you can send it through https://snipboard.io – please follow the instructions on that page, then paste the URL in this thread.

    diandoli

    (@diandoli)

    I mean the space below the field,
    link to image: https://snipboard.io/OCF57z.jpg

    The second image represents the desired result: https://snipboard.io/dJN3Af.jpg
    Thanks

    Thread Starter Fattura24

    (@davideiandoli)

    any suggestion?

    I mean the space below the field,
link to image: https://snipboard.io/OCF57z.jpg

The second image represents the desired result: https://snipboard.io/dJN3Af.jpg
Thanks
    • This reply was modified 2 years ago by Fattura24.
    Igor H

    (@ihereira)

    Hello,
    Thanks for the clarification.

    On Firefox browser I can not see the issue, however on Edge and Chrome the issue is visible.


    Link to image: https://snipboard.io/VeLcl2.jpg

    It looks like there are hidden fields on the form that are using that space.

    For better assistance, can you please share a copy of your site’s System Status? You can find it by navigating to WooCommerce > Status. Select “Get system report” and then “Copy for support”.? Once you’ve done that, paste it here in your response.

    Thread Starter Fattura24

    (@davideiandoli)

    Yes, I use the checkbox to show/hide fields in the checkout!

    Here below data from WooCommerce->Status:

    
### WordPress Environment ###

WordPress address (URL): https://80.211.30.113/wordpress
Site address (URL): https://80.211.30.113/wordpress
WC Version: 7.0.1
REST API Version: ? 7.0.1
WC Blocks Version: ? 8.5.2
Action Scheduler Version: ? 3.4.0
Log Directory Writable: ?
WP Version: 6.1
WP Multisite: –
WP Memory Limit: 6 GB
WP Debug Mode: ?
WP Cron: ?
Language: it_IT
External object cache: –

### Server Environment ###

Server Info: Apache/2.4.6 (CentOS) OpenSSL/1.0.2k-fips PHP/7.4.30
PHP Version: 7.4.30
PHP Post Max Size: 8 MB
PHP Time Limit: 30
PHP Max Input Vars: 1000
cURL Version: 7.29.0
NSS/3.53.1

SUHOSIN Installed: –
MySQL Version: 5.5.5-10.4.25-MariaDB
Max Upload Size: 8 MB
Default Timezone is UTC: ?
fsockopen/cURL: ?
SoapClient: ?
DOMDocument: ?
GZip: ?
Multibyte String: ?
Remote Post: ?
Remote Get: ?

### Database ###

WC Database Version: 7.0.1
WC Database Prefix: wp_
Dimensione totale database: 56.46MB
Dimensione dati database: 33.11MB
Dimensione indice database: 23.35MB
wp_woocommerce_sessions: Dati: 0.05MB + indice: 0.02MB + motore InnoDB
wp_woocommerce_api_keys: Dati: 0.02MB + indice: 0.03MB + motore InnoDB
wp_woocommerce_attribute_taxonomies: Dati: 0.02MB + indice: 0.02MB + motore InnoDB
wp_woocommerce_downloadable_product_permissions: Dati: 0.02MB + indice: 0.06MB + motore InnoDB
wp_woocommerce_order_items: Dati: 1.52MB + indice: 0.36MB + motore InnoDB
wp_woocommerce_order_itemmeta: Dati: 9.52MB + indice: 7.03MB + motore InnoDB
wp_woocommerce_tax_rates: Dati: 0.02MB + indice: 0.06MB + motore InnoDB
wp_woocommerce_tax_rate_locations: Dati: 0.02MB + indice: 0.03MB + motore InnoDB
wp_woocommerce_shipping_zones: Dati: 0.02MB + indice: 0.00MB + motore InnoDB
wp_woocommerce_shipping_zone_locations: Dati: 0.02MB + indice: 0.03MB + motore InnoDB
wp_woocommerce_shipping_zone_methods: Dati: 0.02MB + indice: 0.00MB + motore InnoDB
wp_woocommerce_payment_tokens: Dati: 0.02MB + indice: 0.02MB + motore InnoDB
wp_woocommerce_payment_tokenmeta: Dati: 0.02MB + indice: 0.03MB + motore InnoDB
wp_woocommerce_log: Dati: 0.02MB + indice: 0.02MB + motore InnoDB
wp_actionscheduler_actions: Dati: 0.16MB + indice: 0.16MB + motore InnoDB
wp_actionscheduler_claims: Dati: 0.02MB + indice: 0.02MB + motore InnoDB
wp_actionscheduler_groups: Dati: 0.02MB + indice: 0.02MB + motore InnoDB
wp_actionscheduler_logs: Dati: 0.16MB + indice: 0.09MB + motore InnoDB
wp_commentmeta: Dati: 0.02MB + indice: 0.03MB + motore InnoDB
wp_comments: Dati: 1.52MB + indice: 0.63MB + motore InnoDB
wp_f24_installation_log: Dati: 0.02MB + indice: 0.00MB + motore InnoDB
wp_fattura_tax: Dati: 0.02MB + indice: 0.00MB + motore InnoDB
wp_links: Dati: 0.02MB + indice: 0.02MB + motore InnoDB
wp_options: Dati: 3.03MB + indice: 0.08MB + motore InnoDB
wp_postmeta: Dati: 12.52MB + indice: 12.03MB + motore InnoDB
wp_posts: Dati: 1.52MB + indice: 0.63MB + motore InnoDB
wp_termmeta: Dati: 0.02MB + indice: 0.03MB + motore InnoDB
wp_terms: Dati: 0.02MB + indice: 0.03MB + motore InnoDB
wp_term_relationships: Dati: 0.02MB + indice: 0.02MB + motore InnoDB
wp_term_taxonomy: Dati: 0.02MB + indice: 0.03MB + motore InnoDB
wp_usermeta: Dati: 0.05MB + indice: 0.03MB + motore InnoDB
wp_users: Dati: 0.02MB + indice: 0.05MB + motore InnoDB
wp_wc_admin_notes: Dati: 0.08MB + indice: 0.00MB + motore InnoDB
wp_wc_admin_note_actions: Dati: 0.05MB + indice: 0.02MB + motore InnoDB
wp_wc_category_lookup: Dati: 0.02MB + indice: 0.00MB + motore InnoDB
wp_wc_customer_lookup: Dati: 0.02MB + indice: 0.03MB + motore InnoDB
wp_wc_download_log: Dati: 0.02MB + indice: 0.03MB + motore InnoDB
wp_wc_order_coupon_lookup: Dati: 0.13MB + indice: 0.16MB + motore InnoDB
wp_wc_order_product_lookup: Dati: 1.52MB + indice: 0.70MB + motore InnoDB
wp_wc_order_stats: Dati: 0.28MB + indice: 0.27MB + motore InnoDB
wp_wc_order_tax_lookup: Dati: 0.33MB + indice: 0.34MB + motore InnoDB
wp_wc_product_attributes_lookup: Dati: 0.02MB + indice: 0.02MB + motore InnoDB
wp_wc_product_download_directories: Dati: 0.02MB + indice: 0.02MB + motore InnoDB
wp_wc_product_meta_lookup: Dati: 0.05MB + indice: 0.09MB + motore InnoDB
wp_wc_rate_limits: Dati: 0.02MB + indice: 0.02MB + motore InnoDB
wp_wc_reserved_stock: Dati: 0.02MB + indice: 0.00MB + motore InnoDB
wp_wc_tax_rate_classes: Dati: 0.02MB + indice: 0.02MB + motore InnoDB
wp_wc_webhooks: Dati: 0.02MB + indice: 0.02MB + motore InnoDB

### Post Type Counts ###

attachment: 1
custom_css: 1
customize_changeset: 2
page: 7
post: 2
product: 115
product_variation: 192
revision: 3
shop_coupon: 46
shop_order: 2358
shop_subscription: 240

### Security ###

Secure connection (HTTPS): ?
					Il tuo negozio non utilizza HTTPS. Scopri di più su HTTPS e certificati SSL .
Hide errors from visitors: ?I messaggi di errore non saranno mostrati ai visitatori.

### Active Plugins (8) ###

Query Monitor: by John Blackbourn – 3.10.1
EU/UK VAT for WooCommerce: by WPWhale – 2.8
WooCommerce Fattura24: by Fattura24.com – 6.0.1
WooCommerce Stripe Gateway: by WooCommerce – 6.9.0
WooCommerce Payments: by Automattic – 4.9.0
WooCommerce Subscriptions: by WooCommerce – 3.1.6
WooCommerce: by Automattic – 7.0.1
WP Debugging: by Andy Fragen – 2.11.14

### Inactive Plugins (3) ###

Akismet Anti-Spam: by Automattic – 5.0.1
Hello Dolly: by Matt Mullenweg – 1.7.2
Jetpack: by Automattic – 11.5.1

### Dropin Plugins (1) ###

db.php: Query Monitor Database Class (Drop-in)

### Settings ###

API Enabled: –
Force SSL: –
Currency: EUR (€)
Currency Position: right
Thousand Separator: .
Decimal Separator: ,
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
subscription (subscription)
variable (variable)
variable subscription (variable-subscription)

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: –
Enforce Approved Product Download Directories: –

### WC Pages ###

Shop base: #6 - /shop/
Carrello: #7 - /cart/
Pagamento: #8 - /checkout/
Il mio account: #9 - /my-account/
Termini e condizioni: ? La pagina non è impostata

### Theme ###

Name: Storefront
Version: 4.1.3
Author URL: https://woocommerce.com/
Child Theme: ? – Se stai modificando WooCommerce o un tema genitore che non hai costruito personalmente
ti consigliamo di utilizzare un tema child. Vedi: Come creare un tema child

WooCommerce Support: ?

### Templates ###

Overrides: –

### Abbonamenti ###

WCS_DEBUG: ? No
Subscriptions Mode: ? Live
Subscriptions Live URL: https://80.211.30.113/wordpress
Subscription Statuses: wc-active: 41
wc-on-hold: 199

WooCommerce Account Connected: ? No
Report Cache Enabled: ? Sì
Cache Update Failures: ? 0 non riuscito

### Impostazione del negozio ###

Country / State: Italia — Roma

### Abbonamenti per gateway di pagamento ###

Stripe: wc-active: 37
wc-on-hold: 195

WooCommerce Payments: wc-active: 3
wc-on-hold: 4

### Supporto gateway di pagamento ###

WooCommerce Payments: products
refunds
multiple_subscriptions
subscription_cancellation
subscription_payment_method_change_admin
subscription_payment_method_change_customer
subscription_payment_method_change
subscription_reactivation
subscription_suspension
subscriptions
subscription_amount_changes
subscription_date_changes
tokenization
add_payment_method

Bonifico bancario: products
Pagamenti con assegno: products
Pagamento alla consegna: products
PayPal Standard: subscription_payment_method_change_customer
subscription_payment_method_change_admin
subscription_amount_changes
subscription_date_changes
multiple_subscriptions
subscription_payment_method_delayed_change
subscriptions
subscription_cancellation
subscription_suspension
subscription_reactivation
products
refunds

PayPal Reference Transactions Enabled: ? Yes
Stripe: products
refunds
tokenization
add_payment_method
subscriptions
subscription_cancellation
subscription_suspension
subscription_reactivation
subscription_amount_changes
subscription_date_changes
subscription_payment_method_change
subscription_payment_method_change_customer
subscription_payment_method_change_admin
multiple_subscriptions

### Admin ###

Enabled Features: activity-panels
analytics
coupons
customer-effort-score-tracks
experimental-products-task
experimental-import-products-task
experimental-fashion-sample-products
experimental-product-tour
shipping-smart-defaults
shipping-setting-tour
homescreen
marketing
multichannel-marketing
mobile-app-banner
navigation
onboarding
onboarding-tasks
remote-inbox-notifications
remote-free-extensions
payment-gateway-suggestions
shipping-label-banner
subscriptions
store-alerts
transient-notices
woo-mobile-welcome
wc-pay-promotion
wc-pay-welcome-page

Disabled Features: minified-js
new-product-management-experience
settings

Daily Cron: ? Next scheduled: 2022-11-08 12:14:07 +00:00
Options: ?
Notes: 109
Onboarding: completed

### WooCommerce Payments ###

Version: 4.9.0
Connected to WPCOM: Sì
Blog ID: 192690828
Account ID: acct_1JL64g2HxK2N3tpX

### Action Scheduler ###

Operazione annullata: 2
Oldest: 2022-10-29 10:24:03 +0000
Newest: 2022-10-29 10:24:03 +0000

Completato: 180
Oldest: 2022-10-09 14:26:45 +0000
Newest: 2022-11-07 14:45:26 +0000

Operazione non riuscita: 201
Oldest: 2021-07-26 10:32:33 +0000
Newest: 2021-11-22 08:58:16 +0000

In attesa: 16
Oldest: 2022-11-08 12:40:44 +0000
Newest: 2022-11-30 10:46:15 +0000

### Status report information ###

Generated at: 2022-11-07 14:47:29 +00:00

    thanks

    Thread Starter Fattura24

    (@davideiandoli)

    Hi, at last I solved by myself!
    I removed the class ‘form-row-wide’ in each of the additional checkout fields then, if the checkbox is shown, I remove this class also in billing_company field

    Thanks for all your support and for your time

    • This reply was modified 2 years ago by Fattura24. Reason: removed typo
    Amir A. (woo-hc)

    (@amiralifarooq)

    You’re welcome @davideiandoli glad you were able to sort it out. If you have any new questions please create a new ticket.

    Have a nice day!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘change CSS Woocommerce checkout field’ is closed to new replies.