WordPress footer above content - css

Question

Sorry, I'm a complete newbie at this, My question may sound stupid to some.
I've taken over maintenance of a WordPress site done by another developer who's no longer reachable. I'm having trouble with getting the content to display properly on the following page https://www.covalin.com/product-category/boxes/metallic-boxes/, when I change the number of products to be shown on the page to anything higher than 9, then it pushes the footer to the middle of the page and shows products below the footer. I want to be able to all products under each subcategory. Please see the screenshots below in order to get an idea of the issue. Any guidance will be most appreaciated, I've spent hours trying to figure this out.
When I use the following CSS below, it partly solves the problem but creates another one where all of the content is scrollable but appears behind the footer.
CSS Code - used
.footer {
position: fixed;
bottom:0;
}
PHP Code which changes the number of products display, added by last dev:
/*---------- woo-product pagination number setting ------------*/
add_filter( 'loop_shop_per_page', 'new_loop_shop_per_page', 20 );
function new_loop_shop_per_page( $cols ) {
// $cols contains the current number of products per page based on the value
stored on Options -> Reading
// Return the number of products you wanna show per page.
$cols = 27; //I changed this from 27 to 9 for the page to display properly.
return $cols;
}
How the site looks like with 9 products on a page
How the site looks like with 27 products on a page
Updated - with footer.php file below
<?php
/**
* The template for displaying the footer
*
* Contains footer content and the closing of the #main and #page div elements.
*
* #package WordPress
* #subpackage Twenty_Fourteen
* #since Twenty Fourteen 1.0
*/
?>
<?php // Check if site turned to boxed version
$boxed = ''; $boxed_element = ''; $row_class = '';
if (get_option('site_layout')=='boxed') {$boxed = 'container'; $boxed_element = 'col-md-12 col-sm-12'; $row_class = 'row';}
?>
<?php if ($boxed && $boxed!='') { ?>
</div>
<div class='row'>
<?php } ?>
<?php if ( class_exists('Woocommerce') ): ?>
<?php if(is_shop() || is_product() && is_active_sidebar('footer-bottom-shop')): ?>
<?php if (!$boxed || $boxed=='') : ?><div class="container">
<div class="row"><?php endif; ?>
<div class="shop-bottom-sidebar col-xs-12 col-sm-12 col-md-12">
<?php dynamic_sidebar('footer-bottom-shop'); ?>
</div>
<?php if (!$boxed || $boxed=='') : ?></div>
</div><?php endif; ?>
<?php endif ?>
<?php endif ?>
<footer id="colophon" class="site-footer <?php echo esc_attr($boxed_element);?>">
<?php
if (get_option('site_footer_top_background_option') && get_option('site_footer_top_background_option')!=''){
$site_footer_top_background_option = get_option('site_footer_top_background_option');
}
else{$site_footer_top_background_option='';}
?>
<?php if(is_active_sidebar('footer-top-sidebar-1') || is_active_sidebar('footer-top-sidebar-2')): ?>
<div class="footer-top widget-area <?php echo esc_attr($row_class);?>" style="background:<?php echo esc_attr($site_footer_top_background_option); ?>;">
<?php if (!$boxed || $boxed=='') : ?><div class="container">
<div class="row"><?php endif; ?>
<div class="col-xs-12 col-sm-6 col-md-6 footertopsidebarone">
<?php if(is_active_sidebar('footer-top-sidebar-1')): ?>
<?php dynamic_sidebar('footer-top-sidebar-1'); ?>
<?php endif;?>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 footertopsidebartwo">
<?php if(is_active_sidebar('footer-top-sidebar-2')): ?>
<?php dynamic_sidebar('footer-top-sidebar-2'); ?>
<?php endif;?>
</div>
<?php if (!$boxed || $boxed=='') : ?></div></div><?php endif; ?>
</div>
<?php endif; ?>
<?php
if (get_option('site_middle_background_option') && get_option('site_middle_background_option')!=''){
$site_middle_background_option = get_option('site_middle_background_option');
}
else{$site_middle_background_option='';}
?>
<div class="footer-middle widget-area <?php echo esc_attr($row_class);?>" style="background:<?php echo esc_attr($site_middle_background_option);?>">
<?php if (!$boxed || $boxed=='') : ?><div class="container">
<div class="row"><?php endif; ?>
<?php
if (get_option('footer_bg_img') && get_option('footer_bg_img')!=''){
$footer_bg_img_url = get_option('footer_bg_img');
}
else{$footer_bg_img_url='';}
if (get_option('footer_bg_img_position') && get_option('footer_bg_img_position')!=''){
$footer_bg_img_position = get_option('footer_bg_img_position');
switch($footer_bg_img_position){
case "right":
$storex_footer_bg_position='96%';
break;
case "left":
$storex_footer_bg_position='4%';
break;
}
}
else{$storex_footer_bg_position='';}
?>
<div class="fotter-bg-img" style="background: url(<?php echo esc_url($footer_bg_img_url)?>) no-repeat transparent; background-position:<?php echo esc_attr($storex_footer_bg_position)?> 90%">
<div class="col-xs-12 col-sm-6 col-md-3">
<?php if ( is_active_sidebar( 'footer-sidebar-1' ) ) : ?>
<?php dynamic_sidebar( 'footer-sidebar-1' ); ?>
<?php endif; ?>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<?php if ( is_active_sidebar( 'footer-sidebar-2' ) ) : ?>
<?php dynamic_sidebar( 'footer-sidebar-2' ); ?>
<?php endif; ?>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<?php if ( is_active_sidebar( 'footer-sidebar-3' ) ) : ?>
<?php dynamic_sidebar( 'footer-sidebar-3' ); ?>
<?php endif; ?>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<?php if ( is_active_sidebar( 'footer-sidebar-4' ) ) : ?>
<?php dynamic_sidebar( 'footer-sidebar-4' ); ?>
<?php endif; ?>
</div>
</div>
<?php if (!$boxed || $boxed=='') : ?></div>
</div><?php endif; ?>
</div>
<?php
if (get_option('site_footer_bottom_background_option') && get_option('site_footer_bottom_background_option')!=''){
$site_bottom_background_option = get_option('site_footer_bottom_background_option');
}
else{$site_bottom_background_option='';}
?>
<div id="footer-bottom" style="background:<?php echo esc_attr($site_bottom_background_option); ?>;" class="<?php echo esc_attr($row_class);?> footer-bottom">
<?php if (!$boxed || $boxed=='') : ?><div class="container">
<div class="row"><?php endif; ?>
<div class="col-xs-12 col-sm-6 col-md-6">
<?php if (has_nav_menu('footer-nav')) : ?><!-- Footer navigation -->
<nav id="site-navigation-footer" class="footer-navigation">
<?php wp_nav_menu( array('theme_location' => 'footer-nav') ); ?>
</nav>
<?php endif; ?><!-- Footer navigation -->
<div class="site-info">
<?php $copyright = esc_attr(get_option('site_copyright'));
if ($copyright != '') {
echo esc_attr($copyright);
} else {
echo 'Storex © '.date('Y') .''.esc_html__(' Theme by Themes Zone. All rights reserved', 'storex');
}
?>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<?php if ( is_active_sidebar( 'footer-bottom' ) ) : ?>
<?php dynamic_sidebar( 'footer-bottom' ); ?>
<?php endif; ?>
</div>
<?php if (!$boxed || $boxed=='') : ?></div>
</div><?php endif; ?>
</div>
</footer><!-- #colophon -->
<?php if ($boxed && $boxed!='') { ?>
</div>
<?php } ?>
</div><!-- #page -->
<script>
jQuery( document ).ready(function() {
jQuery('.quantity').append("<span class='qty-cus'>Qty</span>");
jQuery('.wc-forward').val('View Order');
jQuery('.update_cart').val('Update Order');
});
//review order table text changes
jQuery(window).on('load',function(){
setTimeout(function() { //calls click event after a certain time
jQuery('.cart-subtotal th').text('Order SubTotal');
}, 3000);
jQuery('.update_cart').val('Update Order');
jQuery('.page-template-special-offer .header-stripe h1.title').text('SPECIAL OFFERS');
jQuery('.product-description-wrapper > .quantity').remove();
});
var cloned_field = jQuery('.register p.form-row.full').clone();
jQuery('#custom_fax_no').append(cloned_field);
jQuery('.register p.form-row.full').eq(0).remove();
jQuery(window).scroll(function(){
var winScroll= jQuery(window).scrollTop();
console.log(winScroll);
if(winScroll>0){
jQuery('.header-top').addClass('sticky');
}else{
jQuery('.header-top').removeClass('sticky');
}
});
</script>
<?php wp_footer(); ?>
</body>
</html>

Answer 1

The issue is that you are not closing the <div> properly.
Currently it is like
<div id="page" class="hfeed site container">
<div class='row custom_header'>
<!-- some contents..... -->
</div>
<div class='row'>
<div id="main" class="site-main col-md-12 col-sm-12">
<!-- some contents..... -->
</div>
<div class='row'>
<footer id="colophon" class="site-footer col-md-12 col-sm-12">
<!-- some contents... -->
</footer>
</div>
</div>
</div>
It should be like,
<div id="page" class="hfeed site container">
<div class='row custom_header'>
<!-- some contents... -->
</div>
<div class='row'>
<div id="main" class="site-main col-md-12 col-sm-12">
<!-- some contents... -->
</div>
</div>
<div class='row'>
<footer id="colophon" class="site-footer col-md-12 col-sm-12">
<!-- some contents... -->
</footer>
</div>
</div>
There is no need to change the CSS.