Hero title position on WooCommerce category pages

Support Area Forums Elite Hero title position on WooCommerce category pages

Viewing 14 posts - 1 through 14 (of 14 total)
URL to the page in question: http://
  • Author
    Posts
  • #24766
    slurp
    Participant

    Hi, Bill!

    In the WooCommerce category pages, the title is automatically positioned left.
    How can I center it?

    Also, I replaced the hero title on the front page with an image with this snippet:

    body h2.hero-title {
    	background-image: url(https://urltoimage.png);
    	background-size: contain;
    	text-indent: -9999px;
    	height: 300px;
    	width: 300px;
    }

    The image now overrides the category texts that I guess WooCommerce automatically titled.
    How can I contain the custom hero image only to replace the front page hero title?

    Thanks!

    #24767
    slurp
    Participant

    Oh, and how can I get the image that replaces the hero title on the front page to position vertically and horizontally in the center? Now the top of the image seems to start at the vertical middle.

    Thanks!:)

    #24769
    Bill Robbins
    Moderator

    Hello Slurp,

    We can likely help out. What’s the URL to your site?

    Thanks,
    Bill

    #24773
    slurp
    Participant
    This reply has been marked as private.
    #24776
    Bill Robbins
    Moderator

    Thanks for sending over the login. Let’s use this CSS to center the logo on your homepage:

    
    #hero-section {
    	display: table;
    }
    
    .hero-copy  {
    	position: relative;
    	display: table-cell;
    	vertical-align: middle;
    	top: auto;
    	left: auto;
    	right: auto;
    	width: 100%;
    }
    

    The custom-js.php file is somewhat tricky to override. Unless you have to remove something that’s there, I would copy the footer.php file over to your child theme and then just add in the script below this:

    
    <!-- Load wp_footer -->
    <?php wp_footer(); ?>
    

    If you absolutely have to edit the custom-js.php file, what you’ll need to do is copy this from the theme’s functions.php file and add it to your child theme:

    
    		function elite_files() {
    		
    		// include required files
    			include(get_template_directory()."/includes/fonts.php");
    			include(get_template_directory()."/includes/titles.php");
    			include(get_template_directory()."/includes/images.php");
    			include(get_template_directory()."/includes/queries.php");
    			include(get_template_directory()."/includes/scripts.php");
    			include(get_template_directory()."/includes/body-tag.php");
    			include(get_template_directory()."/includes/custom-js.php");
    			include(get_template_directory()."/includes/shortcodes.php");
    			include(get_template_directory()."/includes/custom-css.php");
    			include(get_template_directory()."/includes/author-fields.php");
    			include(get_template_directory()."/includes/content-limit.php");
    			include(get_template_directory()."/includes/tha-theme-hooks.php");
    			include(get_template_directory()."/includes/theme-customizer.php");
    			include(get_template_directory()."/includes/comment-functions.php");
    			include(get_template_directory()."/inc/options-framework-scripts.php");
    			include(get_template_directory()."/includes/custom-meta-boxes/elite.php");
    		
    		
    		// Custom Post Types	
    			include(get_template_directory()."/includes/post-types/staff.php");
    			include(get_template_directory()."/includes/post-types/slides.php");
    			include(get_template_directory()."/includes/post-types/testimony.php");
    			include(get_template_directory()."/includes/post-types/admin-style.php");
    		
    		
    		// include widgets
    			include(get_template_directory()."/includes/widgets.php");
    			include(get_template_directory()."/includes/widget-page.php");
    			include(get_template_directory()."/includes/widget-posts.php");
    			include(get_template_directory()."/includes/widget-video.php");
    			include(get_template_directory()."/includes/widget-social.php");
    			include(get_template_directory()."/includes/widget-product.php");
    			include(get_template_directory()."/includes/widget-contact.php");
    			include(get_template_directory()."/includes/widget-testimony.php");
    			include(get_template_directory()."/includes/widget-attention.php");
    			include(get_template_directory()."/includes/widget-featured-page.php");
    			include(get_template_directory()."/includes/widget-facebook-like-box.php");
    
    		}
    

    Then you’ll need to change this line:

    
    include(get_template_directory()."/includes/custom-js.php");
    

    to this:

    
    include(get_stylesheet_directory()."/includes/custom-js.php");
    

    which will load the custom-js.php from the child theme instead of the parent.


    To center the logo horizontally, I would add a bit more padding to the top:

    
    #logo,
    #text-logo {
    	padding-top: 15px;
    }
    

    To center the hero section in a product category, use this:

    
    .tax-product_cat #hero-section .hero-copy {
    	text-align: center;
    }
    

    For the scroll down, since that post was published, we added in the hero section for product categories so there is one more spot to edit. I went on and just made that change for you.


    See how all that goes for you 🙂

    #24785
    slurp
    Participant

    Hi!

    Thank you very much for all that!
    The hero title center now fine, but I would like to replace the text title with a picture. How would I go about that?
    I tried adding it with the background-image command like this:

    .hero-copy  {
    	position: relative;
    	display: table-cell;
    	vertical-align: middle;
    	top: auto;
    	left: auto;
    	right: auto;
    	width: 100%;
      	background-image: url("logo.png");
        background-repeat: no-repeat;
      	background-position: center;
    }

    But that way the image (the logo) went to the actual center covering the hero texts.
    Furthermore, if the hero title is changed in the front page, does it affect the WooCommerce category displaying as a text/name of the category? If so, can they be two separate instances?

    As for the logo in the navigation bar, I ended up just doing it with the right pixel dimensions, because otherwise the logo came over the navigation bar and I couldn’t figure out how to easily resize it to fit the nav bar.

    Thanks, Bill! You are the best!:)

    #24801
    Bill Robbins
    Moderator

    I would probably only use text replacement on the caption or the title, but not both. It’ll be more efficient to make one image that has everything you need for the title and caption than to have two.

    If you need to replace the caption with CSS image replacement, start with this:

    
    .hero-copy p {
    	text-indent: -9999px;
    	width: 400px;
    	height: 200px;
      	background-image: url("logo.png");
        background-repeat: no-repeat;
      	background-position: center;
    }
    

    You can use different images on different pages. WordPress adds unique body tags to each page/category so they can be styled differently. That would look something like this:

    
    body.home .hero-copy p {
    	text-indent: -9999px;
    	width: 400px;
    	height: 200px;
      	background-image: url("logo.png");
        background-repeat: no-repeat;
      	background-position: center;
    }
    

    where “home” is one of the classes added to the body tag on the home page.

    You might look at the newest version of the theme. It adds in an uploader on each page so you can replace the hero title with an image. That way you can have different images in different places without having to code it in.

    Take care,
    Bill

    #24810
    slurp
    Participant

    Hi!

    I updated the theme! Now the featured products widgets stopped showing four items per row. 😀
    Do you know what might be causing that?

    The custom css that made a row of four items instead of three is copied from this forum from one of your answers:

    .product-list {
    	margin-right: -15px;
    }
    
    .home-product-block li {
    	width: 262px;
    	margin-right: 15px;
    }
    
    .home-product-block li:nth-child(3n + 1) {
    	margin-right: 15px;
    }
    
    .home-product-block li:nth-child(3n + 3) {
    	margin-right: 15px;
    	margin-left: 0;
    }
    
    @media only screen and (min-width: 1024px) and (max-width: 1200px) {
    	
    	.home-product-block li,
    	#staff-list article {
    		width: 217px;
    	}
    
    }
    #24813
    Bill Robbins
    Moderator

    I think we’re past what I can give you in included customizations. If you’d like to pull together any additional ones, I can give you a quote.

    Thanks,
    Bill

    #24814
    Bill Robbins
    Moderator

    Before that, try adding this to your Custom CSS along with the code above:

    
    .product-list ul.fly-in li:nth-child(3n + 1) {
    	clear: none;
    }
    
    #24815
    slurp
    Participant

    Hello!

    Oh, I am sorry! I didn’t mean to exploit your support in any way!
    The simple truth is that your help here in this support forum is just so swift and great that I started turning to it quite often — I guess a bit too often.

    May I ask, what kind of support might I seek here in the future? Or have I filled up my quota on questions?
    It might also be a good idea to add some guidelines to this forum about posting and what is included in the support. I hadn’t thought about this before, which probably means there might be others as well. 🙂

    The last line of code you provided fixed the problem! Thank you so much for everything, Bill!

    From now on, I’ll try to resolve more on my own. 🙂

    #24816
    Bill Robbins
    Moderator

    I love to help folks. I really do.

    Support really is questions about how to use a theme or if you’re having some type of trouble or have found a bug.

    Customization is changing a theme to do something that it wasn’t designed to do. I do help out with some customization. Technically we include up to seven lines of code customized as part of a theme purchase. Typically I go much beyond that though because I do enjoy helping people.

    Thanks again,
    Bill

    #24831
    slurp
    Participant

    That truly shows — and I bet I speak for everyone here, when I say I truly appreciate your insights.

    Ok, I think I have a better idea now about what to come here for, in case I encounter such situations.

    Take care and once more, thank you!

    #24832
    Bill Robbins
    Moderator

    Anytime. I really appreciate your business.

    Let me know if you have any trouble.

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Hero title position on WooCommerce category pages’ is closed to new replies.