Profile: Valentin

Hello toanhnt,

for the latest version of the theme, the above mentioned styling needs to be tweaked like so:

@media all and (min-width: 1025px) {
    .product-grid .item-box .add-info {
        opacity: 1;
        position: relative;
        height: auto !important;
        border: 0;
    }

    .product-grid .item-box .product-rating-box {
        opacity: 1;
        margin-bottom: 10px;
    }

    .product-grid .item-box .buttons {
        opacity: 1;
        position: relative !important;
        bottom: auto;
    }
    .product-grid .item-box .description { 
        display: none
    }

    .product-grid .item-box .buttons a:hover, .product-grid .item-box .buttons 
 input[type="button"]:hover, .product-grid .item-box .buttons .ajax-cart-button-wrapper:hover * {
        height: 32px;
    }

    .product-grid .prices {
        margin-bottom: 10px;
    }
}

Hope this is what you are looking for.

Hello again, OTH,

you can just open the above-mentioned file and replace its contents with the code I gave you here.
However, it will not make the availability status look any different.
It will just add the mentioned classes to the element depending on - if the product has quantity or not.
You then need to use these classes to add some custom styling in your theme`s Custom Head Styles section, for your elements e.g.:

.is-in-stock {
   color: green;
}

.is-out-of-stock {
   color: red;
}

Hope this clarifies things a bit.

Hello Forlis,

here you can read in details about the issue - link to Google article.

However, whether you should implement this or not is entirely up to you since the approach they are recommending requires all of the font style files to be icluded inline in the HTML. It basically deems all the linked fonts (from their own site) - "blocking content".

Hope this was helpful.

Hello OTH,

there are many options for the Availability of the products, but if you want to just check if a product is Out of stock and have different styling for the label you can use the following approach.

In the _Availability.cshtml file in your Product folder add the bolded lines of code:

@model ProductDetailsModel

@using Nop.Services.Localization

@inject ILocalizationService localizationService

@if (!string.IsNullOrWhiteSpace(Model.StockAvailability) || Model.DisplayBackInStockSubscription)
{
    <div class="availability">
        @if (!string.IsNullOrWhiteSpace(Model.StockAvailability))
        {

            bool outOfStock = string.Equals(localizationService.GetResource("products.availability.outofstock"), Model.StockAvailability, StringComparison.InvariantCulture);
            string stockClass = "is-in-stock";

            if (outOfStock)
            {
                stockClass = "is-out-of-stock";
            }

            <div class="stocking @stockClass">
                <span class="label">@T("Products.Availability"):</span>
                <span class="value" id="stock-availability-value[email protected]">@Model.StockAvailability</span>
            </div>
        }
        @await Html.PartialAsync("_BackInStockSubscription", Model)
    </div>
}

This will add a class of is-in-stock anytime the product is not Out of stock, and a class of is-out-of-stock if the stock quantity is 0.
You can then you these classes to add some custom styling to Availability element like red color if is-out-of-stock and green if is-in-stock.

Hope this was helpful.

Hello sansem,

can you please submit a ticket in our Help Desk with some more details of your issue and a link to your store so we can investigate what the problem might be.

[u][/u]

Hello Abdul,

please submit a ticket for this issue and provide admin credentials and a working link to your store in it. So we can investigate the issue and figure out what the problem might be.

Do not submit your credentials here, cause they will be visible to the other users, too.

https://www.nop-templates.com/nopcommerce-development-services

Hello abdulwahe,

unfortunately, there is no easy way to achieve this. many modifications would be required to the theme`s markup and styling and this could not be done out of the box. Especially if you are using the CloudZoom plugin in your theme.

If you still want to do this, you can take a look at out Custom Work page and submit a quote with more details of what exactly you want and maybe some designs/mock-ups so we can better estimate the work and tell you what it would cost.

Hi yazhodha,

sorry for the inconvenience.

To fix this string resource you need to go in your admin panel to Configuration -> Languages, click Edit on your active language. Then select the String resources tab and search for this Resource name:

ShoppingCart.DiscountAndVouchers

When you find it, just Edit its Value to whatever you like.

Hello amiralma,

the Emporium theme is fully responsive and all of the elements should respond to the device width and stretch their own as necessary.

However, that does not mean that all of them would scale e.g. the font-sizes would remain the same, the element heights, too. Only in some cases, e.g. the products images in the product boxes would scale since they need to keep their proportion.

I hope this clarifies things a bit.

Hello Pradeep,

what you want to achieve classifies as customization and you can use our Custom Work page to submit a quote for this.

Please also elaborate more on what you would like your final result to be, and if possible attach some screenshots or mock-ups. We will get back to you as soon as possible with our time estimation for the task.