Separation Boxes in Add to Cart / Add to Wishlist Area

  • Posts: 713
  • Thank you received: 37
  • Hikashop Business
6 years 1 month ago #304073

-- HikaShop version -- : 4.0.2
-- Joomla version -- : 3.9.3
-- PHP version -- : 7.2
-- Browser(s) name and version -- : Chrome

For about a year now, I've noticed something that was just not high on the priority list for me, but now that I have time...I wanted to ask.

In the attached photos, you will see 2 images...

Separation Boxes Shown (circled in red)



Separation Boxes Missing (again...circled in red)


The boxes around the + and - buttons for adding or subtracting quantities are either there, or they aren't, on the product listings. I've searched & searched my site, and I think I've figured out a correlation, but I cannot figure how to fix it. The same is true when it shows the "add to cart" or the "add to wishlist" ONLY when it is in the specified area.

The separation boxes ONLY shows when the item is out of stock. If the item is in stock (with a specific quantity on hand), or special order (quantity is set to unlimited)...those boxes around the + and - do not show.

Any way to resolve this so the site will be showing the same boxes on ALL products no matter if they are or are not in stock?

I am using the default CSS for the back end and for front end, but the style sheet for the front end is technically using the default but I have it set to custom so I could change ONLY colors of some of the wording to better suit my darker themed template. The color changes are the ONLY changes I've made...nothing else. When I set the style sheet to default, this box issue around the + and - options does not change.

Thank you

Owner - Aries Games & Miniatures
Attachments:
Last edit: 6 years 1 month ago by Dragon41673.

Please Log in or Create an account to join the conversation.

  • Posts: 4820
  • Thank you received: 654
  • MODERATOR
6 years 3 weeks ago #304115

Hello,

Without an Url link, I can only make a guess, for a reason or another their is no css command for some specific html class.
In some case the add to whishlist html class is linked to some css command that "dress" with boxes your quantity button, and in other case the quantity part class is different and so the css command can be applied, see my scheme :



Then, you can edit your frontend css file, see this tutorial , and use the inspector tool to get the Selector you have to extend your selector.

Example :
Before :
.add-whishlist-class .quantity-button {
// Css boxes command
}
After :
.add-button-class .quantity-button,
.add-whishlist-class .quantity-button {
// Css boxes command
}

Hope this will help you
Regards

Last edit: 6 years 3 weeks ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 713
  • Thank you received: 37
  • Hikashop Business
6 years 2 weeks ago #304517

Phillip,

I apologize I never got back to you...for some reason I never got notified there was a response even though I was subscribed.

Here's a link to some products you can try...

Out of Stock Product showing the boxes...
ariesgamesandminis.com/index.php/shoppin...572-aries-prime.html

In Stock Product NOT showing those boxes...
ariesgamesandminis.com/index.php/shoppin...aries-m-variant.html

I'll give what you are showing a shot on the test site and see if that works, but if you could please take a peek at the links above I'd appreciate it.

Thank you!

Owner - Aries Games & Miniatures
Last edit: 6 years 2 weeks ago by Dragon41673.

Please Log in or Create an account to join the conversation.

  • Posts: 83483
  • Thank you received: 13506
  • MODERATOR
6 years 2 weeks ago #304520

Hi,

The issue comes from the custom CSS:

.hikashop_product_stock table tr, .hikashop_product_stock table td {
    border: 0px !important;
}
that you have in /media/com_hikashop/css/style_custom.css


That class hikashop_product_stock is only there when the product has stock.
So instead you want to use a class of a parent div which is always there regardless of the stock.
For example:
.hikashop_product_quantity_main tr, .hikashop_product_quantity_main td {
    border: 0px !important;
}

Please Log in or Create an account to join the conversation.

  • Posts: 713
  • Thank you received: 37
  • Hikashop Business
6 years 1 week ago #304581

OK...some how my subscriptions are NOT working for this thread. That's twice now I'm not getting them and I even looked in my spam folder.

So nicolas, should I replace:

.hikashop_product_stock table tr, .hikashop_product_stock table td {
    border: 0px !important;
}

With:
.hikashop_product_quantity_main tr, .hikashop_product_quantity_main td {
    border: 0px !important;
}

Or just add it to the custom.css?

I find it odd that it's changing those boxes. I made NO changes to the default CSS file other than colors so it would look a bit better with the darker background of my site. Even when I switch back to the default CSS file, they still don't show up.

Thank you

Owner - Aries Games & Miniatures

Please Log in or Create an account to join the conversation.

  • Posts: 4820
  • Thank you received: 654
  • MODERATOR
6 years 1 week ago #304594

Hello,

First, note that the style.cssisn't supported anymore and was created a long time ago and that's why sometime with a recent HikaShop version this can leads to display issue like yours.

To answer your question you can do as you want I mean :
You can simply replace the code note by Nicolas with the second version, if you don't want at all bordered boxes.
But if you prefer have boxes everywhere in style_custom.css around line 33, you have this :
.hikashop_product_stock table tr,
.hikashop_product_stock table td {
border: 0px !important;
}
Replace for this
.hikashop_product_stock table tr,
.hikashop_product_stock table td {
border: 1px solid #dedede;
}

You can add at the end of css file to complete, the point here is to keep the style.css as it was from the start and to keep your own custom on your side (at the end of the css file).
It's a good method if later you have to modify again your css file or go back to the original version.

Hope this will help you to move forward on your issue.
Regards

Last edit: 6 years 1 week ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 713
  • Thank you received: 37
  • Hikashop Business
6 years 6 days ago #304837

Philip wrote: Hello,

First, note that the style.cssisn't supported anymore and was created a long time ago and that's why sometime with a recent HikaShop version this can leads to display issue like yours.

To answer your question you can do as you want I mean :
You can simply replace the code note by Nicolas with the second version, if you don't want at all bordered boxes.
But if you prefer have boxes everywhere in style_custom.css around line 33, you have this :
.hikashop_product_stock table tr,
.hikashop_product_stock table td {
border: 0px !important;
}
Replace for this
.hikashop_product_stock table tr,
.hikashop_product_stock table td {
border: 1px solid #dedede;
}

You can add at the end of css file to complete, the point here is to keep the style.css as it was from the start and to keep your own custom on your side (at the end of the css file).
It's a good method if later you have to modify again your css file or go back to the original version.

Hope this will help you to move forward on your issue.
Regards


Hello Philip,

Thank you for getting this over to me, I had time to play around with it and it works well...but I'm confused on something...

A couple years ago, when I was toying around with the .CSS files, I was told to NEVER change the Front or Back End .CSS files, ONLY to change things on the style sheet. Now...you're telling me differently. Why is that?

Owner - Aries Games & Miniatures

Please Log in or Create an account to join the conversation.

  • Posts: 4820
  • Thank you received: 654
  • MODERATOR
6 years 5 days ago #304850

Hello,

Hard to answer you because I don't have the context of this past discussion, so I will start from what I know :
- The Style.css is now not supported anymore, and is quite old, and so can sometime links to display issue with recent HikaShop Version (but it's not sure, just theorical).
- Right now, if you edit the frontend file or the backend file it's automatically create a custom version of your file, and so if you make mistake, you just have to select the default one to go back.
As you can see that's not anymore really an issue, so maybe this advice was given before all of this conditions ?... Just a guess.

Hope this will answer you.
Regards

Last edit: 6 years 5 days ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 713
  • Thank you received: 37
  • Hikashop Business
6 years 5 days ago #304860

Maybe... either way...thank you Philip!

Owner - Aries Games & Miniatures

Please Log in or Create an account to join the conversation.

Time to create page: 0.091 seconds
Powered by Kunena Forum