Countdown Timers Styles 2 and 3

Hi @demonjax

The style depends a lot on the theme you’re using. You can check and see it works fine on our demo page https://demo.wpclever.net/wooct/ (WPCstore theme).

But don’t worry, it is easy to modify it by using the CSS code. Please create a dev/staging site with the same configuration and send me the link then I can help you check and provide the CSS code.

Thanks for your message

Box Layout: https://staging-digamiwi.temp927.kinsta.cloud/product/hike-and-brew/
Circle Layout: https://staging-digamiwi.temp927.kinsta.cloud/product/5k-10k-run/
Archive view: https://staging-digamiwi.temp927.kinsta.cloud/events/

-Paul

Please add below CSS code to WP-Admin → Appearance → Customize → Additional CSS:

.wooct-countdown.wooct-style-02, .wooct-countdown.wooct-style-03 {
    font-size: 10px;
}

.wooct-countdown.wooct-style-02 .wooct-timer > span span:first-child, .wooct-countdown.wooct-style-03 .wooct-timer > span span:first-child {
    margin-bottom: 5px;
}

.wooct-countdown.wooct-style-03 .wooct-timer > span {
    display: flex;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    overflow: hidden;
    padding: 0;
    flex-direction: column;
    justify-content: center;
}

And the result:
– box on single product https://www.screencast.com/t/qO1L9hFbQ
– circle on single product https://www.screencast.com/t/nrigCjRmGF
– archive page on desktop https://www.screencast.com/t/QvV1kN5Vz
– archive page on mobile https://www.screencast.com/t/XYV7AxDXvfi

I think you should show one column for the content on the mobile device to enough space for the countdown timer or you can hide it.

The only remaining issue is on mobile the countdown is so wide that it messes up the page layout in two columns. Is it possible to add a line break (maybe layout display block?) in between the hours and minutes so that the page layout doesn’t get messed up?

Another option might be to suppress the seconds timer and shrink the size of the days, hours, and minutes so that it doesn’t go too wide.

Can you help with either of these solutions?

https://www.dropbox.com/s/ziwuakr6lbij8cg/2021-08-07_09-52-31.png?dl=0

Please add additional CSS code for small screen here:

@media only screen and (max-width: 1023px) {
    .wooct-countdown.wooct-style-02 .wooct-timer, .wooct-countdown.wooct-style-03 .wooct-timer {
        flex-wrap: wrap;
    }
    
    .wooct-countdown.wooct-style-02 .wooct-timer > span, .wooct-countdown.wooct-style-03 .wooct-timer > span {
        flex-grow: 2;
        width: 50%;
        flex: 0 0 40%;
        margin-bottom: 4px;
    }
}

And the result https://www.screencast.com/t/OgIzs5Jfl7n