XStore Theme Issues: Cart Sidebar, Slider Responsiveness, Menu & UI Problems

Hello @regencycigaremporium,

1. Upon inspecting the code, we found that WooCommerce sets the input type to “hidden” when the product quantity cannot be changed (i.e., when the minimum and maximum quantities are the same – in your case, quantity value is 1. To implement a solution, you may choose one of the following options:

Option 1: Add the following PHP snippet to your “xstore-child/functions.php” plugin or any plugin that provides functionality for implementation of custom snippets such as “Code Snippets” plugin:

add_filter('woocommerce_quantity_input_type', function ($type) {
       return 'number';
   });

Option 2: Hide the input plus/minus symbols when the input is hidden by adding the following custom CSS:

.product-content form.cart .quantity:has(input[type=hidden]) {
       display: none;
   }

2. Upon reviewing the source of your slider, we noticed that you are using the “Slides” widget provided by the Elementor PRO plugin. For any questions related to their widgets, we recommend contacting the plugin’s support team, as we are responsible only for the features and settings provided by our theme.
As a possible solution, you can change the background image size from “cover” to “contain.” However, for more detailed assistance with Elementor PRO widgets, please reach out to their support.

3. To add custom content to the mini-cart, please add the following PHP snippet to your child-theme/functions.php file:

add_action('woocommerce_widget_shopping_cart_before_buttons', function() {
       echo '<div class="mini-cart-custom-content">Custom content</div>';
   }, 9999);

Then, add the following custom CSS:

.product_list-popup-footer-inner {
       display: flex;
       flex-wrap: wrap;
   }

   .product_list-popup-footer-inner > * {
       flex-basis: 100%;
   }

   .mini-cart-custom-content {
       order: -1;
       margin-bottom: 20px;
   }

For more information about adding custom CSS, please refer to:
https://www.8theme.com/documentation/xstore/additional-customisation/optimal-placement-for-custom-css-code/

4. If you would like all product images across the product grid, list, or carousel to appear square (with the same aspect ratio), please use the following custom CSS:

.etheme-product-grid-image img {
       aspect-ratio: 1/1;
       object-fit: contain;
       object-position: center;
   }

Alternatively, you can set a custom image size in the “Archive Products” widget of the XStore Archive Products Builder.

5. Please try using the following custom CSS:

.elementor-widget-theme-etheme_nav_menu .nav-sublist-dropdown {
       max-height: 340px;
       overflow: auto;
   }

Frontend result: https://gyazo.com/aa4bd2e5d0bb764e912cd94e6413b76d

6. The issue is caused by the width value set for one of the widgets (Menu List) in your footer being greater than 100% in Footer Elementor editor -> Menu list -> Advanced -> Layout. Please reset this value or set it to a maximum of 100%.

7. The double scroll issue occurs when both the mini-cart items and the page itself have scroll enabled. You can fix this by disabling page scrolling whenever any off-canvas content widget is open:

.etheme-elementor-off-canvas--shown {
       overflow: hidden;
   }

8. The absence of a close button occurs because you are opening the image URL directly on image click in product gallery. To enable the Lightbox feature, open the Single Product Builder via Elementor (under the XStore Builders page in your dashboard) and activate the “Lightbox” option in the Product Gallery widget.

9. Please try using the following custom CSS:

.etheme-search-input-placeholder {
       max-width: 100%;
       white-space: nowrap;
       width: 100%;
       text-overflow: ellipsis;
   }

   .etheme-search-input-wrapper {
       max-width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
   }

Best regards,
Jack Richardson
The 8Theme’s Team