You've already forked wc-bootstrap
magdev
784b400c46
Catalog: page title via woocommerce_page_title(), breadcrumbs, category template rename (underscore), 3-column grid, single chevron on sort. Single product: variable form data attributes + disabled CSS class fix (WC JS only toggles CSS classes, not HTML disabled attribute), dark mode select specificity (0,5,1) to beat WC's (0,4,3) background shorthand, gallery main image in thumbnail strip with empty URL guard, related/ upsells setup_postdata for correct global $product, grouped product loop logic rewrite. Account: downloads via wc_get_customer_available_downloads(). New: product-gallery.js, sanitize_title filter, wc_setup_product_data() and wp_reset_postdata() Twig functions, product-thumbnails.html.twig suppressor. Removed obsolete PLAN.md and SETUP.md. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
647 lines
20 KiB
CSS
647 lines
20 KiB
CSS
/**
|
|
* WooCommerce Bootstrap - Bootstrap 5 Overrides
|
|
*
|
|
* Provides Bootstrap 5 styling for any plugin CSS classes
|
|
* that may be injected by the plugin's JavaScript or inline markup.
|
|
*
|
|
* CSS dependency chain (lowest to highest priority):
|
|
* 1. wp-bootstrap (parent theme)
|
|
* 2. woocommerce (plugin styles)
|
|
* 3. wc-bootstrap-style (child theme style.css)
|
|
* 4. wc-bootstrap-overrides (this file)
|
|
*
|
|
* @package WcBootstrap
|
|
* @since 0.1.0
|
|
*/
|
|
|
|
/* ==========================================================================
|
|
Button Overrides
|
|
Map plugin button classes to Bootstrap button styles.
|
|
========================================================================== */
|
|
|
|
/* Example: Map plugin .my-button to Bootstrap styling
|
|
.my-button {
|
|
display: inline-block;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 1rem;
|
|
border-radius: var(--bs-border-radius);
|
|
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
|
}
|
|
*/
|
|
|
|
/* ==========================================================================
|
|
WooCommerce Notice Overrides
|
|
Map WooCommerce notice classes to Bootstrap alert styles as fallback
|
|
when notices are rendered outside our Twig templates.
|
|
========================================================================== */
|
|
|
|
/* Override woocommerce.css which sets border-top: 3px solid, background-color:
|
|
#f6f5f8, and a WooCommerce icon font ::before on notice classes.
|
|
Two selector patterns at specificity 0,2,0:
|
|
- .woocommerce .woocommerce-* — notices inside a .woocommerce wrapper
|
|
- .alert.woocommerce-* — notices rendered by our Twig templates */
|
|
.woocommerce .woocommerce-info,
|
|
.woocommerce .woocommerce-message,
|
|
.woocommerce .woocommerce-error,
|
|
.alert.woocommerce-info,
|
|
.alert.woocommerce-message,
|
|
.alert.woocommerce-error {
|
|
position: relative;
|
|
padding: 1rem 3rem 1rem 1rem;
|
|
margin: 0 0 1rem;
|
|
border: var(--bs-border-width) solid transparent;
|
|
border-top: var(--bs-border-width) solid transparent;
|
|
border-radius: var(--bs-border-radius);
|
|
background-color: transparent;
|
|
background-image: none;
|
|
}
|
|
|
|
.woocommerce .woocommerce-info,
|
|
.alert.woocommerce-info {
|
|
color: var(--bs-info-text-emphasis);
|
|
background-color: var(--bs-info-bg-subtle);
|
|
border-color: var(--bs-info-border-subtle);
|
|
}
|
|
|
|
.woocommerce .woocommerce-message,
|
|
.alert.woocommerce-message {
|
|
color: var(--bs-success-text-emphasis);
|
|
background-color: var(--bs-success-bg-subtle);
|
|
border-color: var(--bs-success-border-subtle);
|
|
}
|
|
|
|
.woocommerce .woocommerce-error,
|
|
.alert.woocommerce-error {
|
|
color: var(--bs-danger-text-emphasis);
|
|
background-color: var(--bs-danger-bg-subtle);
|
|
border-color: var(--bs-danger-border-subtle);
|
|
list-style: none;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
/* WooCommerce JS (woocommerce.js:focus_populate_live_region) adds tabindex="-1"
|
|
and calls .focus() on notices for screen reader accessibility. The default
|
|
browser focus ring appears white in dark mode — suppress it since these are
|
|
non-interactive elements (the focus is only for screen reader announcement). */
|
|
.alert.woocommerce-info:focus,
|
|
.alert.woocommerce-message:focus,
|
|
.alert.woocommerce-error:focus {
|
|
outline: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Suppress WooCommerce icon font ::before — our templates use Bootstrap Icons */
|
|
.woocommerce .woocommerce-info::before,
|
|
.woocommerce .woocommerce-message::before,
|
|
.woocommerce .woocommerce-error::before,
|
|
.alert.woocommerce-info::before,
|
|
.alert.woocommerce-message::before,
|
|
.alert.woocommerce-error::before {
|
|
display: none;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Quantity Input
|
|
Sizing for the Bootstrap input-group quantity widget.
|
|
========================================================================== */
|
|
|
|
.quantity.input-group .form-control {
|
|
/* Remove number input spinners (browser default) */
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
.quantity.input-group .form-control::-webkit-outer-spin-button,
|
|
.quantity.input-group .form-control::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Product Cards
|
|
Hover effects and layout for product loop cards.
|
|
========================================================================== */
|
|
|
|
.product.card {
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
|
|
.product.card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--bs-box-shadow) !important;
|
|
}
|
|
|
|
/* Product image in card */
|
|
.product.card img {
|
|
object-fit: cover;
|
|
aspect-ratio: 1 / 1;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Product link wrapping card content — remove underline, inherit text color */
|
|
.product.card a.woocommerce-LoopProduct-link {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
/* Product title in card body */
|
|
.product.card .woocommerce-loop-product__title {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* Push price to bottom of card body for even card heights */
|
|
.product.card .card-body .price {
|
|
margin-top: auto;
|
|
}
|
|
|
|
/* Add-to-cart button — Bootstrap btn-outline-primary style */
|
|
.product.card .button {
|
|
display: inline-block;
|
|
width: 100%;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
border-radius: var(--bs-border-radius);
|
|
color: var(--bs-primary);
|
|
border: var(--bs-border-width) solid var(--bs-primary);
|
|
background-color: transparent;
|
|
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
|
}
|
|
|
|
.product.card .button:hover {
|
|
color: #fff;
|
|
background-color: var(--bs-primary);
|
|
border-color: var(--bs-primary);
|
|
}
|
|
|
|
/* "View options" button for variable products */
|
|
.product.card .button.product_type_variable {
|
|
color: var(--bs-secondary);
|
|
border-color: var(--bs-secondary);
|
|
}
|
|
|
|
.product.card .button.product_type_variable:hover {
|
|
color: #fff;
|
|
background-color: var(--bs-secondary);
|
|
border-color: var(--bs-secondary);
|
|
}
|
|
|
|
/* "Read more" button for external/non-purchasable products */
|
|
.product.card .button.product_type_external {
|
|
color: var(--bs-info);
|
|
border-color: var(--bs-info);
|
|
}
|
|
|
|
.product.card .button.product_type_external:hover {
|
|
color: #fff;
|
|
background-color: var(--bs-info);
|
|
border-color: var(--bs-info);
|
|
}
|
|
|
|
/* Added-to-cart visual feedback */
|
|
.product.card .added_to_cart {
|
|
display: inline-block;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 0.875rem;
|
|
margin-top: 0.5rem;
|
|
color: var(--bs-success);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* WooCommerce result count and ordering bar */
|
|
.woocommerce-result-count {
|
|
margin-bottom: 0;
|
|
line-height: 2.5;
|
|
}
|
|
|
|
/* Ordering select — Bootstrap's .form-select handles all styling.
|
|
Remove duplicate rules that conflict with Bootstrap's dropdown arrow.
|
|
WooCommerce's woocommerce-layout.css sets background-image on selects;
|
|
ensure Bootstrap's chevron wins via appearance: none. */
|
|
.woocommerce-ordering .form-select {
|
|
appearance: none;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Sale Badge
|
|
Position inside gallery area, not overlapping breadcrumb.
|
|
WooCommerce sets top: -.5em which bleeds above the containing block.
|
|
========================================================================== */
|
|
|
|
.woocommerce span.onsale {
|
|
top: 0.5em;
|
|
left: 0.5em;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Star Rating
|
|
Consistent sizing for Bootstrap Icon star ratings.
|
|
========================================================================== */
|
|
|
|
.wc-star-rating .bi {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Price Styling
|
|
Override WooCommerce default price markup with Bootstrap-aligned styles.
|
|
========================================================================== */
|
|
|
|
.price del {
|
|
text-decoration: line-through;
|
|
color: var(--bs-secondary-color);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.price ins {
|
|
text-decoration: none;
|
|
color: var(--bs-danger);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Product Gallery
|
|
Thumbnail grid and cursor for single product image gallery.
|
|
========================================================================== */
|
|
|
|
.wc-gallery-thumb {
|
|
cursor: pointer;
|
|
opacity: 0.7;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.wc-gallery-thumb:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.woocommerce-product-gallery__image img {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: var(--bs-border-radius);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Single Product Layout
|
|
Reset WooCommerce's float-based two-column layout for single product pages.
|
|
Bootstrap's row/col-lg-6 grid handles the layout instead.
|
|
========================================================================== */
|
|
|
|
.woocommerce div.product div.images,
|
|
.woocommerce div.product div.summary {
|
|
float: none;
|
|
width: 100%;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Variation Selectors
|
|
Spacing for variable product attribute dropdowns.
|
|
========================================================================== */
|
|
|
|
.variations_form .reset_variations {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.single_variation_wrap .woocommerce-variation {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Shop / Archive Layout
|
|
Reset WooCommerce's default float grid to let Bootstrap handle layout.
|
|
Override woocommerce-layout.css float-based widths and clearfixes.
|
|
========================================================================== */
|
|
|
|
/* Reset float-based result count / ordering bar — use flexbox instead */
|
|
.post-type-archive-product .woocommerce-result-count,
|
|
.tax-product_cat .woocommerce-result-count,
|
|
.tax-product_tag .woocommerce-result-count,
|
|
.post-type-archive-product .woocommerce-ordering,
|
|
.tax-product_cat .woocommerce-ordering,
|
|
.tax-product_tag .woocommerce-ordering {
|
|
float: none;
|
|
}
|
|
|
|
/* Reset WooCommerce's product grid floats and widths */
|
|
.woocommerce ul.products,
|
|
.woocommerce .products {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
clear: both;
|
|
}
|
|
|
|
.woocommerce ul.products li.product,
|
|
.woocommerce .products .product {
|
|
float: none;
|
|
width: auto;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Cart Table
|
|
Responsive cart item layout and thumbnail sizing.
|
|
========================================================================== */
|
|
|
|
.woocommerce-cart-form .product-thumbnail img {
|
|
width: 60px;
|
|
height: 60px;
|
|
object-fit: cover;
|
|
border-radius: var(--bs-border-radius);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Checkout
|
|
Sticky order review sidebar and payment method toggle.
|
|
========================================================================== */
|
|
|
|
.payment_box {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.woocommerce-checkout .form-row label {
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Override WooCommerce form fields to use Bootstrap styles */
|
|
.woocommerce-checkout .form-row input.input-text,
|
|
.woocommerce-checkout .form-row textarea,
|
|
.woocommerce-checkout .form-row select {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
color: var(--bs-body-color);
|
|
background-color: var(--bs-body-bg);
|
|
border: var(--bs-border-width) solid var(--bs-border-color);
|
|
border-radius: var(--bs-border-radius);
|
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
.woocommerce-checkout .form-row input.input-text:focus,
|
|
.woocommerce-checkout .form-row textarea:focus,
|
|
.woocommerce-checkout .form-row select:focus {
|
|
border-color: #86b7fe;
|
|
outline: 0;
|
|
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Dark Mode Overrides
|
|
Fix any plugin elements that don't adapt to Bootstrap's dark mode.
|
|
========================================================================== */
|
|
|
|
/* Bootstrap 5 dark mode uses data-bs-theme="dark" attribute on <html> */
|
|
|
|
/* Native <select> elements — woocommerce.css sets:
|
|
select { background-color: var(--wc-form-color-background, #fff) }
|
|
The custom property is never defined for dark mode, so it falls back to #fff. */
|
|
[data-bs-theme="dark"] .woocommerce select,
|
|
[data-bs-theme="dark"] .wc-block-checkout select {
|
|
background-color: var(--bs-body-bg);
|
|
color: var(--bs-body-color);
|
|
border-color: var(--bs-border-color);
|
|
}
|
|
|
|
/* Text inputs & textareas — same issue as <select>: woocommerce.css sets
|
|
.form-row .input-text { background-color: var(--wc-form-color-background, #fff) }
|
|
with higher specificity than the theme's checkout form rules. */
|
|
[data-bs-theme="dark"] .woocommerce .form-row .input-text,
|
|
[data-bs-theme="dark"] .woocommerce .form-row textarea {
|
|
background-color: var(--bs-body-bg);
|
|
color: var(--bs-body-color);
|
|
border-color: var(--bs-border-color);
|
|
}
|
|
|
|
/* SelectWoo / Select2 — select2.css hardcodes #fff backgrounds on selection
|
|
containers and dropdowns. Override to use Bootstrap's dark mode variables. */
|
|
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
|
|
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
|
|
background-color: var(--bs-body-bg);
|
|
color: var(--bs-body-color);
|
|
border-color: var(--bs-border-color);
|
|
}
|
|
|
|
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
|
|
color: var(--bs-body-color);
|
|
}
|
|
|
|
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
|
|
border-color: var(--bs-secondary-color) transparent transparent transparent;
|
|
}
|
|
|
|
[data-bs-theme="dark"] .select2-dropdown {
|
|
background-color: var(--bs-body-bg);
|
|
color: var(--bs-body-color);
|
|
border-color: var(--bs-border-color);
|
|
}
|
|
|
|
[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
|
|
background-color: var(--bs-tertiary-bg);
|
|
color: var(--bs-body-color);
|
|
border-color: var(--bs-border-color);
|
|
}
|
|
|
|
[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true],
|
|
[data-bs-theme="dark"] .select2-container--default .select2-results__option[data-selected=true] {
|
|
background-color: var(--bs-tertiary-bg);
|
|
}
|
|
|
|
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
|
|
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[data-selected] {
|
|
background-color: var(--bs-primary);
|
|
color: #fff;
|
|
}
|
|
|
|
/* Variable product attribute selectors — woocommerce.css sets:
|
|
.woocommerce div.product form.cart .variations select { background: url(...) no-repeat }
|
|
at specificity (0,4,3). We must match or exceed that.
|
|
Override both background-color (white fallback) and background-image (black SVG chevron)
|
|
so Bootstrap's dark-mode form-select styling takes effect. */
|
|
[data-bs-theme="dark"] .woocommerce div.product form.cart .variations select,
|
|
[data-bs-theme="dark"] .woocommerce div.product .variations .form-select {
|
|
background-color: var(--bs-body-bg);
|
|
background-image: var(--bs-form-select-bg-img);
|
|
color: var(--bs-body-color);
|
|
border-color: var(--bs-border-color);
|
|
}
|
|
|
|
/* Checkout form focus color for dark mode */
|
|
[data-bs-theme="dark"] .woocommerce-checkout .form-row input.input-text:focus,
|
|
[data-bs-theme="dark"] .woocommerce-checkout .form-row textarea:focus,
|
|
[data-bs-theme="dark"] .woocommerce-checkout .form-row select:focus {
|
|
border-color: #6ea8fe;
|
|
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Sticky Header
|
|
Shadow effect when header is in stuck position.
|
|
========================================================================== */
|
|
|
|
header.sticky-top.is-stuck {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
transition: box-shadow 0.2s ease;
|
|
}
|
|
|
|
[data-bs-theme="dark"] header.sticky-top.is-stuck {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Block Navigation Fix
|
|
Required for dropdown menus inside WordPress block navigation.
|
|
========================================================================== */
|
|
|
|
.wp-block-navigation__container {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
My Account
|
|
Navigation and layout for the My Account area.
|
|
Reset WooCommerce's float-based layout to let Bootstrap flex grid handle it.
|
|
========================================================================== */
|
|
|
|
.woocommerce-account main .woocommerce,
|
|
.woocommerce-cart main .woocommerce,
|
|
.woocommerce-checkout main .woocommerce,
|
|
.post-type-archive-product main .woocommerce,
|
|
.tax-product_cat main .woocommerce,
|
|
.tax-product_tag main .woocommerce {
|
|
max-width: none;
|
|
}
|
|
|
|
.woocommerce-account .woocommerce-MyAccount-navigation {
|
|
float: none;
|
|
width: auto;
|
|
}
|
|
|
|
.woocommerce-account .woocommerce-MyAccount-content {
|
|
float: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.woocommerce-MyAccount-navigation .list-group-item {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.woocommerce-MyAccount-navigation .list-group-item.active {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Dashboard: avatar rounding */
|
|
.woocommerce-MyAccount-content .avatar {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Dashboard: quick action card hover lift */
|
|
.woocommerce-MyAccount-content a.card {
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
color: inherit;
|
|
}
|
|
|
|
.woocommerce-MyAccount-content a.card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--bs-box-shadow) !important;
|
|
}
|
|
|
|
/* View-order notes */
|
|
.woocommerce-OrderUpdate-description p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Address cards */
|
|
.woocommerce-Address address {
|
|
font-style: normal;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* My Account forms — apply Bootstrap form-control styles */
|
|
.woocommerce-MyAccount-content .form-row input.input-text,
|
|
.woocommerce-MyAccount-content .form-row textarea,
|
|
.woocommerce-MyAccount-content .form-row select {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
color: var(--bs-body-color);
|
|
background-color: var(--bs-body-bg);
|
|
border: var(--bs-border-width) solid var(--bs-border-color);
|
|
border-radius: var(--bs-border-radius);
|
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
.woocommerce-MyAccount-content .form-row input.input-text:focus,
|
|
.woocommerce-MyAccount-content .form-row textarea:focus,
|
|
.woocommerce-MyAccount-content .form-row select:focus {
|
|
border-color: #86b7fe;
|
|
outline: 0;
|
|
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Order Details
|
|
Styling for the order details and tracking pages.
|
|
========================================================================== */
|
|
|
|
.woocommerce-order-details .table tfoot th {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.woocommerce-order-details .table tfoot tr:last-child th,
|
|
.woocommerce-order-details .table tfoot tr:last-child td {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.product-quantity {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Shop Table
|
|
Reset WooCommerce's border styles on .shop_table to let Bootstrap's
|
|
.table class handle borders via --bs-table-* custom properties.
|
|
========================================================================== */
|
|
|
|
.woocommerce table.shop_table {
|
|
border: 0;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.woocommerce table.shop_table td,
|
|
.woocommerce table.shop_table th {
|
|
border-left: 0;
|
|
border-right: 0;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Product Gallery
|
|
WooCommerce JS sets opacity: 1 after initialization. Ensure the gallery
|
|
is visible even if WC JS doesn't run (e.g., gallery features disabled).
|
|
========================================================================== */
|
|
|
|
.woocommerce-product-gallery--without-images {
|
|
opacity: 1 !important;
|
|
}
|