Skip to content

WooCommerce Filter by Price block fields padding issue in Assembler theme #8033

Open

Description

Quick summary

The Filter by Price block fields do not show the whole min/max price.

Annotation on 2024-08-23 at 12-08-16

This issue is occurring because of the padding on the field.

I've tested the field in other themes like Twenty Twenty-Four, Tazza, and Tsubaki. This issue does not occur in those themes because they have set the input field padding to padding: 8px;, while Assembler has it set at padding:0.8rem 1rem;.

Steps to reproduce

  1. Install Assembler theme
  2. Go to Appearance > Editor > Templates > Product Catalog
  3. Add the Filter by Price block to the page
  4. View the min/max fields are cutting-off the prices

A clear and concise description of what you expected to happen.

The user expects to see the whole number in the min/max fields of the Filter by Price block.

What actually happened

The padding prevents users from seeing the whole price in the fields.

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

If the above answer is "Yes...", outline the workaround.

Add this CSS as a workaround:

.wc-block-price-slider input:not([type="submit"]):not([type="checkbox"]) {
padding: 8px;
}

Platform (Simple and/or Atomic)

Atomic

Logs or notes

I am currently only seeing this issue in the Assembler theme.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Type

    No type

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions