Put category text below picture

[plumandgrain]

Hi
How do I put the category/sub category text under the image instead of over it, please.

many thanks

claire

[Harry]

Hi Claire,

Please add below code to gecko-child > functions.php

if ( ! function_exists( 'jas_gecko_wc_page_head' ) ) {
    function jas_gecko_wc_page_head() {
        // Remove old position of breadcrumb
        remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
        if ( ! cs_get_option( 'wc-enable-page-title' ) || ( class_exists( 'WCV_Vendors' ) && WCV_Vendors::is_vendor_page() ) ) return;

        $title = cs_get_option( 'wc-page-title' );

        $output = '<div class="page-head pr tc"><div class="jas-container pr">';
            if ( is_search() ) {
            $output .= '<h1 class="mb__5 cw">' . sprintf(__( 'Search Results for: %s', 'gecko' ), '<span>' . get_search_query() . '</span>' ) . '</h1>';
            } elseif ( is_shop() ) {
                $output .= '<h1 class="tu mb__10 cw">' . esc_html( cs_get_option( 'wc-page-title' ) ) . '</h1>';
                $output .= '<p>' . do_shortcode( cs_get_option( 'wc-page-desc' ) ) . '</p>';
            } elseif ( is_product_category() ) {
                // Remove old position of category description
                //remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );

                $output .= '<h1 class="tu mb__10 cw">' . single_cat_title( '', false ) . '</h1>';
                //$output .= do_shortcode( category_description() );
                //add_action( 'woocommerce_before_shop_loop', 'woocommerce_taxonomy_archive_description', 40 );
                //add_action( 'woocommerce_before_shop_loop', 'woocommerce_product_archive_description', 40 );
            } else {
                $output .= '';
            }
            ob_start();
                woocommerce_breadcrumb();
            $output .= ob_get_clean();
        $output .= '</div></div>';

        echo wp_kses_post( $output );
    }
    add_action( 'woocommerce_before_main_content', 'jas_gecko_wc_page_head', 15 );
    add_action( 'woocommerce_before_single_product', 'jas_gecko_wc_page_head', 5 );
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[plumandgrain]

Hi Harry

Sorry this has made no difference, the text is still appearing over the image when category and sub-category images are displayed. Do I have to replace the code that is already there, or add to it? I have tried adding it before and after existing code but there was no difference either way.

Many thanks

Claire

[Harry]

Hi Claire,

it not work on shop page only work on category page https://prnt.sc/vg7lvo

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[plumandgrain]

Hi Harry

Sorry, Perhaps I didn’t make myself very clear, I meant the text/headings and the words ‘shop now’  that are displayed over each of the category pictures on the shop page, i.e. the text over the image for accessories, candles, cards & stationery etc not the header image at the top of the page. This would also be the same for any category page that has sub categories displayed on the page, e.g. the candles page

many thanks

claire

[Harry]

Hi Claire,

Please add below code to JanStudio > Theme Option > General Layout > Custom CSS

.woocommerce .product-category h2, .product-category h2, .woocommerce .product-category h3, .product-category h3 {
	position: relative;
	left: 0;
	padding: 15px 0;
}
.product-category h2::after, .product-category h3::after {
	left: 75px;
}
.product-category h2::before, .product-category h3::before {
	left: 0;
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[plumandgrain]

Hi Harry

Thats great, thank you very much. I just seem to have a couple more problems, on two of the categories on the shop page, ‘cards & stationery’ and ‘Wellbeing & Skincare’, it displays ‘shop now’ under the category heading, how do I delete that text. Also I have just realised on a phone the category names stay on the picture as it was doing originally, is there any way I can change that.

Many thanks

Claire

 

[Harry]

Hi Claire,

Please change prev code to

.woocommerce .product-category h2, .product-category h2, .woocommerce .product-category h3, .product-category h3 {
	position: relative;
	left: 0;
	padding: 15px 0;
}
.product-category h2::after, .product-category h3::after,
.product-category h2::before, .product-category h3::before {
	display: none;
}
@media only screen and (max-width: 768px) {
.woocommerce .product-category h2, .product-category h2, .woocommerce .product-category h3, .product-category h3 {
	font-size: 15px;
}}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[plumandgrain]

Hi Harry

Thank you so much for all your help, the desktop version now is perfect, but for some reason there are still a few categories on the mobile site that show the words ‘shop now’ under the category, any ideas, help, as to why this would be?

Many thanks

Claire

[Harry]

Hi Claire,

Please clear cache on your site and on your phone and check again.

I check on my phone not see the text.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[plumandgrain]

Hi Harry

Yes, all good, sorry.

Many thanks, again

Claire

[Author]

Posts