Support » WooCommerce » Stripe Kreditkarte Inputfelder width: 1px

  • Gelöst derbutch

    (@derbutch)


    Hallo zusammen,

    unter meinem Checkout – sind die Inputfelder für die Kredikarte (Zahlungsart Stripe) nur 1 Px breit (siehe Bild) Bild Checkout

    Wenn ich mir den Quelltext anschaue, finde ich zwar den Fehler, weiß aber nicht wo ich dies ändern könnte:

    <div id="stripe-card-element" class="wc-stripe-elements-field StripeElement empty">
      <div class="__PrivateStripeElement" ....><iframe name="__privateStripeFrame7657" frameborder="0"
                allowtransparency="true" scrolling="no" role="presentation" allow="payment *"
                src="https://js.stripe.com/v3/elements-inner-card-.... style=" border: none !important; margin: 0px
                !important; padding: 0px !important; <strong>width: 1px </strong>!important; min-width: 100% !important;
          overflow: hidden !important; display: block !important; user-select: none !important; transform: translate(0px)
          !important; color-scheme: light only !important; height: 18px;"></iframe><input
               class="__PrivateStripeElement-input" aria-hidden="true" aria-label=" " autocomplete="false" maxlength="1"
               style="border: none !important; display: block !important; position: absolute !important; height: 1px !important; top: -1px !important; left: 0px !important; padding: 0px !important; margin: 0px !important; width: 100% !important; opacity: 0 !important; background: transparent !important; pointer-events: none !important; font-size: 16px !important;">
      </div>
    </div>

    Vielleicht hat jemand eine Idee?

    Danke und Gruß Butch


    Moderationshinweis: Code formatiert.

Ansicht von 13 Antworten - 1 bis 13 (von insgesamt 13)
  • Hallo,
    leider mal wieder: bei einem Blick in unsere FAQ hättest du gesehen, dass wir ohne weitere Infos nur Kaffeesatzleserei betreiben können:
    Wenn du dann noch die URL oben einträgst, dann können wir uns das auch zunächst im Frontend ansehen und dir sicher besser helfen.

    Du findest unter Werkzeuge > Websitezustand > Info einen Bericht zur Website. Warte bitte einen Moment bis die Ladeanzeige ganz oben abgeschlossen ist und kopiere dann per Button den Website-Bericht in deine Zwischenablage. Über den Button „Bericht in die Zwischenablage kopieren“ kannst du den Bericht unverändert (bitte mit den Akzentzeichen am Anfang und Ende) einfügen und anschließend hier posten. Evtl. ergeben sich dann weitere Anhaltspunkte, ob und wo das Problem liegt.
    Lies bitte auch noch mal: Bevor du ein neues Thema (Thread) erstellst.

    Viele Grüße
    Hans-Gerd

    • Diese Antwort wurde geändert vor 1 Jahr, 3 Monaten von Hans-Gerd Gerhards. Grund: Tippfehler
    Thread-Starter derbutch

    (@derbutch)

    Hallo Hans-Gerd,

    da hast Du recht mit, werde mich in Zukunft daran halten.

    Website Bericht

    
    ### wp-core ###
    
    version: 6.1.1
    site_language: de_DE
    user_language: de_DE
    timezone: Europe/Berlin
    permalink: /%postname%/
    https_status: true
    multisite: false
    user_registration: 0
    blog_public: 1
    default_comment_status: open
    environment_type: production
    user_count: 4
    dotorg_communication: true
    
    ### wp-paths-sizes ###
    
    wordpress_path: /var/www/vhosts/check-shirt.de/httpdocs
    wordpress_size: 621,68 MB (651874530 bytes)
    uploads_path: /var/www/vhosts/check-shirt.de/httpdocs/wp-content/uploads
    uploads_size: 223,85 MB (234722137 bytes)
    themes_path: /var/www/vhosts/check-shirt.de/httpdocs/wp-content/themes
    themes_size: 22,95 MB (24069907 bytes)
    plugins_path: /var/www/vhosts/check-shirt.de/httpdocs/wp-content/plugins
    plugins_size: 334,78 MB (351044242 bytes)
    database_size: 23,20 MB (24330240 bytes)
    total_size: 1,20 GB (1286041056 bytes)
    
    ### wp-dropins (1) ###
    
    advanced-cache.php: true
    
    ### wp-active-theme ###
    
    name: Cocoon Child (cocoon-child)
    version: undefined
    author: Gnodesign
    author_website: http://themeforest.net/user/gnodesign/
    parent_theme: Cocoon (cocoon)
    theme_features: core-block-patterns, widgets-block-editor, post-thumbnails, post-formats, html5, automatic-feed-links, title-tag, woocommerce, align-wide, menus, widgets
    theme_path: /var/www/vhosts/check-shirt.de/httpdocs/wp-content/themes/cocoon-child
    auto_update: Deaktiviert
    
    ### wp-parent-theme ###
    
    name: Cocoon (cocoon)
    version: 1.2.9
    author: Gnodesign
    author_website: http://themeforest.net/user/gnodesign/
    theme_path: /var/www/vhosts/check-shirt.de/httpdocs/wp-content/themes/cocoon
    auto_update: Deaktiviert
    
    ### wp-themes-inactive (5) ###
    
    Lumise Theme: version: 1.0, author: King-Theme, Automatische Aktualisierungen deaktiviert
    Twenty Twenty: version: 1.9, author: WordPress-Team (latest version: 2.1), Automatische Aktualisierungen deaktiviert
    Twenty Twenty-One: version: 1.5, author: WordPress-Team (latest version: 1.7), Automatische Aktualisierungen deaktiviert
    Twenty Twenty-Three: version: 1.0, author: WordPress-Team, Automatische Aktualisierungen deaktiviert
    Twenty Twenty-Two: version: 1.1, author: WordPress-Team (latest version: 1.3), Automatische Aktualisierungen deaktiviert
    
    ### wp-plugins-active (32) ###
    
    Checkout Field Editor for WooCommerce: version: 1.8.1, author: ThemeHigh, Automatische Aktualisierungen deaktiviert
    Cocoon Core: version: 1.0.8, author: Gnodesign, Automatische Aktualisierungen aktiviert
    Code Snippets: version: 3.2.2, author: Code Snippets Pro, Automatische Aktualisierungen deaktiviert
    Complianz | GDPR/CCPA Cookie Consent: version: 6.3.9, author: Really Simple Plugins, Automatische Aktualisierungen deaktiviert
    Contact Form 7: version: 5.7.2, author: Takayuki Miyoshi, Automatische Aktualisierungen aktiviert
    Disable & Remove Google Fonts: version: 1.5.2, author: Fonts Plugin, Automatische Aktualisierungen deaktiviert
    Envato Market: version: 2.0.7, author: Envato, Automatische Aktualisierungen aktiviert
    Error Log Monitor: version: 1.7.3, author: Janis Elsts, Automatische Aktualisierungen deaktiviert
    Germanized for WooCommerce: version: 3.11.2, author: vendidero, Automatische Aktualisierungen deaktiviert
    Google Listings and Ads: version: 2.3.5, author: WooCommerce, Automatische Aktualisierungen aktiviert
    Jetpack: version: 11.6, author: Automattic, Automatische Aktualisierungen aktiviert
    Kirki Customizer Framework: version: 4.0.24, author: David Vongries, Automatische Aktualisierungen aktiviert
    Loco Translate: version: 2.6.3, author: Tim Whitlock, Automatische Aktualisierungen deaktiviert
    Lumise - Product Designer Tool: version: 2.0, author: King-Theme, Automatische Aktualisierungen aktiviert
    MailPoet: version: 4.3.1, author: MailPoet, Automatische Aktualisierungen aktiviert
    MC4WP: Mailchimp for WordPress: version: 4.8.12, author: ibericode, Automatische Aktualisierungen aktiviert
    Multi-Step Checkout for WooCommerce: version: 2.22, author: SilkyPress, Automatische Aktualisierungen deaktiviert
    One Stop Shop for WooCommerce: version: 1.3.4, author: vendidero, Automatische Aktualisierungen deaktiviert
    PayPal PLUS for WooCommerce: version: 2.2.1, author: Inpsyde GmbH, Automatische Aktualisierungen aktiviert
    Real Media Library (Free): version: 4.18.27, author: devowl.io, Automatische Aktualisierungen aktiviert
    Search & Replace: version: 3.2.1, author: Inpsyde GmbH, Automatische Aktualisierungen aktiviert
    Slider Revolution: version: 6.5.21, author: ThemePunch, Automatische Aktualisierungen aktiviert
    Variation Swatches for WooCommerce: version: 2.0.16, author: Emran Ahmed, Automatische Aktualisierungen aktiviert
    W3 Total Cache: version: 2.2.9, author: BoldGrid, Automatische Aktualisierungen deaktiviert
    WooCommerce: version: 7.2.2, author: Automattic, Automatische Aktualisierungen aktiviert
    WooCommerce Amazon Pay: version: 2.3.0, author: WooCommerce, Automatische Aktualisierungen aktiviert
    WooCommerce Payments: version: 5.2.1, author: Automattic, Automatische Aktualisierungen aktiviert
    WooCommerce PayPal Payments: version: 2.0.1, author: WooCommerce, Automatische Aktualisierungen aktiviert
    WooCommerce Shipping & Tax: version: 2.1.1, author: WooCommerce, Automatische Aktualisierungen aktiviert
    WooCommerce Stripe Gateway: version: 7.0.1, author: WooCommerce, Automatische Aktualisierungen deaktiviert
    WPBakery Page Builder: version: 6.9.0, author: Michael M - WPBakery.com (latest version: 6.10.0), Automatische Aktualisierungen aktiviert
    YITH WooCommerce Wishlist: version: 3.16.0, author: YITH, Automatische Aktualisierungen aktiviert
    
    ### wp-plugins-inactive (4) ###
    
    Addons for KingComposer: version: 1.0.0, author: themebon, Automatische Aktualisierungen aktiviert
    Akismet Anti-Spam: version: 5.0.2, author: Automattic, Automatische Aktualisierungen aktiviert
    WordPress Importer: version: 0.8, author: wordpressdotorg, Automatische Aktualisierungen aktiviert
    Yoast SEO: version: 19.13, author: Team Yoast, Automatische Aktualisierungen deaktiviert
    
    ### code-snippets (5) ###
    
    snippet-1: name: Ändere Upload-Dateinamen in Kleinbuchstaben, scope: global, modified: 2022-08-30 15:45:53, tags: [sample, media]
    snippet-2: name: Admin-Leiste deaktivieren , scope: front-end, modified: 2022-08-30 15:45:53, tags: [sample, admin-bar]
    snippet-3: name: Smileys zulassen, scope: global, modified: 2022-08-30 15:45:53, tags: [sample]
    snippet-4: name: Aktuelles Jahr, scope: content, modified: 2022-08-30 15:45:53, tags: [sample, dates]
    snippet-5: name: Cart, scope: content, modified: 2022-11-22 20:16:58
    
    ### wp-media ###
    
    image_editor: WP_Image_Editor_Imagick
    imagick_module_version: 1690
    imagemagick_version: ImageMagick 6.9.10-23 Q16 x86_64 20190101 https://imagemagick.org
    imagick_version: 3.7.0
    file_uploads: File uploads is turned off
    post_max_size: 16M
    upload_max_filesize: 16M
    max_effective_size: 16 MB
    max_file_uploads: 20
    imagick_limits: 
    	imagick::RESOURCETYPE_AREA: 122 MB
    	imagick::RESOURCETYPE_DISK: 1073741824
    	imagick::RESOURCETYPE_FILE: 6144
    	imagick::RESOURCETYPE_MAP: 512 MB
    	imagick::RESOURCETYPE_MEMORY: 256 MB
    	imagick::RESOURCETYPE_THREAD: 1
    imagemagick_file_formats: 3FR, 3G2, 3GP, AAI, AI, ART, ARW, AVI, AVS, BGR, BGRA, BGRO, BIE, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CRW, CUR, CUT, DATA, DCM, DCR, DCX, DDS, DFONT, DJVU, DNG, DOT, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, EXR, FAX, FILE, FITS, FRACTAL, FTP, FTS, G3, G4, GIF, GIF87, GRADIENT, GRAY, GRAYA, GROUP4, GV, H, HALD, HDR, HEIC, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, J2C, J2K, JBG, JBIG, JNG, JNX, JP2, JPC, JPE, JPEG, JPG, JPM, JPS, JPT, JSON, K25, KDC, LABEL, M2V, M4V, MAC, MAGICK, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, MPEG, MPG, MRW, MSL, MSVG, MTV, MVG, NEF, NRW, NULL, ORF, OTB, OTF, PAL, PALM, PAM, PANGO, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PGX, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, PPM, PREVIEW, PS, PS2, PS3, PSB, PSD, PTIF, PWP, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, STEGANO, SUN, SVG, SVGZ, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIFF, VIPS, VST, WBMP, WEBP, WMF, WMV, WMZ, WPG, X, X3F, XBM, XC, XCF, XPM, XPS, XV, XWD, YCbCr, YCbCrA, YUV
    gd_version: bundled (2.1.0 compatible)
    gd_formats: GIF, JPEG, PNG, WebP, BMP, XPM
    ghostscript_version: 9.27
    
    ### wp-server ###
    
    server_architecture: Linux 5.10.49-buster64-210713-raycon x86_64
    httpd_software: Apache
    php_version: 7.4.33 64bit
    php_sapi: fpm-fcgi
    max_input_variables: 10000
    time_limit: 30
    memory_limit: 4096M
    max_input_time: 60
    upload_max_filesize: 16M
    php_post_max_size: 16M
    curl_version: 7.64.0 OpenSSL/1.1.1n
    suhosin: false
    imagick_availability: true
    pretty_permalinks: true
    htaccess_extra_rules: true
    
    ### wp-database ###
    
    extension: mysqli
    server_version: 5.7.40
    client_version: mysqlnd 7.4.33
    max_allowed_packet: 20971520
    max_connections: 4190
    
    ### wp-constants ###
    
    WP_HOME: undefined
    WP_SITEURL: undefined
    WP_CONTENT_DIR: /var/www/vhosts/check-shirt.de/httpdocs/wp-content
    WP_PLUGIN_DIR: /var/www/vhosts/check-shirt.de/httpdocs/wp-content/plugins
    WP_MEMORY_LIMIT: 40M
    WP_MAX_MEMORY_LIMIT: 4096M
    WP_DEBUG: true
    WP_DEBUG_DISPLAY: true
    WP_DEBUG_LOG: false
    SCRIPT_DEBUG: false
    WP_CACHE: true
    CONCATENATE_SCRIPTS: undefined
    COMPRESS_SCRIPTS: undefined
    COMPRESS_CSS: undefined
    WP_ENVIRONMENT_TYPE: Nicht definiert
    DB_CHARSET: utf8
    DB_COLLATE: undefined
    
    ### wp-filesystem ###
    
    wordpress: writable
    wp-content: writable
    uploads: writable
    plugins: writable
    themes: writable
    
    ### jetpack ###
    
    site_id: 207442555
    ssl_cert: No
    time_diff: undefined
    version_option: 11.6:1670379394
    old_version: 11.5.1:1667442277
    public: Public
    master_user: #1 admin
    current_user: #1 admin
    tokens_set: Blog User
    blog_token: xxxxxxxxxxxxxxxxxxxxxxxxxxx
    user_token:xxxxxxxxxxxxxxxxxxxxxxxx
    version: 11.6
    jp_plugin_dir: /var/www/vhosts/check-shirt.de/httpdocs/wp-content/plugins/jetpack/
    plan: free
    protect_header: {"trusted_header":"REMOTE_ADDR","segments":1,"reverse":false}
    full_sync: {"started":"Tue, 22 Nov 2022 19:40:08 +0000","finished":"Tue, 22 Nov 2022 19:40:22 +0000","progress":{"options":{"finished":true},"functions":{"finished":true},"constants":{"finished":true},"users":{"total":"1","sent":1,"finished":true,"last_sent":"1"},"network_options":{"finished":true}},"config":{"options":true,"functions":true,"constants":true,"users":[1],"network_options":true}}
    sync_size: undefined
    sync_lag: 0 seconds
    full_sync_size: 6
    full_sync_lag: 31 weeks, 3 days, 19 minutes, 2 seconds
    idc_urls: {"home":"https:\/\/check-shirt.de","siteurl":"https:\/\/check-shirt.de","WP_HOME":"","WP_SITEURL":""}
    idc_error_option: false
    idc_optin: true
    cxn_tests: All Pass.
    
    
    • Diese Antwort wurde geändert vor 1 Jahr, 3 Monaten von Hans-Gerd Gerhards. Grund: Formatierung Code korrigiert

    Hallo,
    schade, aber mir ist es nicht gelungen, die entsprechende Stelle auf der Website zu finden, sonst hätte ich evtl. eine CSS-Regel angeben können.

    Einige Anmerkungen zum Bericht:

    • Jetpack ist übrigens unter datenschutzrechtlichen Gesichtspunkten problematisch. Das Plugin solltest du löschen.
    • Das Problem könnte vielleicht mit dem Plugin Checkout Field Editor for WooCommerce zusammenhängen. Vermutlich dürfte es besser sein, wenn Du Dich direkt an den Support-Bereich des Plugins wendest.
    • Inaktive Plugins und Themes solltest Du schon aus Sicherheitsgründen löschen

    Viele Grüße
    Hans-Gerd

    Thread-Starter derbutch

    (@derbutch)

    Vielen Dank für dein Support… das Plugin Checkout Field Editor habe ich genau aus diesem Grund mal mit der Hoffnung auf Anpassung installiert und eben dann auch wieder deinstalliert. Danke für den jetpack Hinweis👍.

    Kann nur nicht verstehen, warum der Wert auf 1px Breite (Inputfeld) geht, kann ja nicht normal sein :).

    PlugIn habe ich auch schon mal de- und wieder neu installiert.

    Hab da echt viel Zeit investiert und verstehe einfach nicht die 1 Px Standardeinstellung und werde wohl weiter testen müssen.

    Für jeden weiten Tipp wäre ich wirklich sehr dankbar
    VG Butch

    Hallo,
    ich habe das gerade nochmals getestet und mir ist es wieder nicht gelungen, die entsprechende Stelle auf deiner Website zu finden. 🤷‍♂️

    Viele Grüße
    Hans-Gerd

    • Diese Antwort wurde geändert vor 1 Jahr, 3 Monaten von Hans-Gerd Gerhards. Grund: Ergänzung
    Thread-Starter derbutch

    (@derbutch)

    Bsp:
    1. https://check-shirt.de/produkt/t-shirt-organic-unisex-gelb/
    2. Größe und Farbe auswählen
    3. Button in den Warenkorb
    4. oben rechts auf Warenkorb und zur Kasse gehen
    5. Daten eingeben dann danach bei Lieferung auch auf dem Button Weiter klicken
    6. Zahlungsart – hier sieht man auch direkt den Fehler

    Danke für die Mühe

    Das div hier
    <div class=__PrivateStripeElement" style="...">
    ist scheinbar zu schmal.

    Thread-Starter derbutch

    (@derbutch)

    wenn ich mir den Seitencode im Browsern anschaue und auf einen anderen Wert ändere (siehe Bild Code)
    wird das Eingabefeld größer.

    Ich frage mich nur wie ich da dran komme? Oder wie kann ich das iframe ggf. mit richtigen Parameter füllen (wenn überhaupt möglich)?

    Danke und Gruß
    butch

    • Diese Antwort wurde geändert vor 1 Jahr, 3 Monaten von derbutch.
    • Diese Antwort wurde geändert vor 1 Jahr, 3 Monaten von derbutch.

    Hast du mal versucht, dieser CSS-Class im Custom-CSS eine Breite zu verpassen?

    Es geht auch nicht um das iframe, sondern um das div drumherum.

    • Diese Antwort wurde geändert vor 1 Jahr, 3 Monaten von bscu.
    Thread-Starter derbutch

    (@derbutch)

    Nein und oje.. bin mit css ein wenig eingerostet… versuche es mal.. dauert jetzt aber etwas 🙂

    .__PrivateStripeElement { width: 200px; }

    Thread-Starter derbutch

    (@derbutch)

    Das war es … 👍👍👍👍👍👍👍👍👍

    Vielen Dank für die Unterstützung

    Bild

    • Diese Antwort wurde geändert vor 1 Jahr, 3 Monaten von derbutch.

    Problem gelöst?

    Dann wäre es toll, wenn du den Thread bitte noch rasch als „gelöst“ markierst.

Ansicht von 13 Antworten - 1 bis 13 (von insgesamt 13)
  • Das Thema „Stripe Kreditkarte Inputfelder width: 1px“ ist für neue Antworten geschlossen.