Is there a way to conceal a div class on the Payment page in Shopify?

I have encountered an issue with the code on the Shopify checkout (Payment) Page. Unfortunately, I am unable to directly edit this page within Shopify, but I have discovered that it is possible to add custom CSS or HTML code within the checkout settings of my Shopify account. View checkout settings in Shopify.

Specifically, I am looking to hide a certain div class related to PayPal:

<div class="radio-wrapper content-box__row " data-gateway-group="express" data-gateway-name="paypal" data-select-gateway="37585059906" data-submit-i18n-key="complete_order">
  <div class="radio__input">
      <input class="input-radio" id="checkout_payment_gateway_37585059906" data-backup="payment_gateway_37585059906" aria-describedby="payment_gateway_37585059906_description" aria-controls="payment-gateway-subfields-37585059906" type="radio" value="37585059906" checked="checked" name="checkout[payment_gateway]">
  </div>

<div class="radio__label  ">
  <label for="checkout_payment_gateway_37585059906" class="radio__label__primary content-box__emphasis">
      <img alt="PayPal" class="offsite-payment-gateway-logo" src="//cdn.shopify.com/shopifycloud/shopify/assets/checkout/offsite-gateway-logos/paypal@2x-768388b0667bef1aa9a7cf02fa1cc2184c2915a90d4cdd62dde223f74f2acbfc.png">
        <span class="visually-hidden">
          PayPal
        </span>

Is there a specific code snippet that can be inserted into the style box in Shopify settings to achieve the desired outcome of hiding the PayPal element mentioned above?

javascripthtmlcssshopifyshopify-template

Answer №1

const box = document.getElementById("targetElement");
const btn = document.querySelector("button");

btn.addEventListener('click', _ => {
  box.style.display = 'none';
});
#targetElement{
  width : 200px;
  height : 200px;
  background-color : red;
}
<div id="targetElement">

</div>
<button type="button">Hide</button>

To hide a div element, use the CSS property "display: none".

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm seeking assistance with a frontend script problem. I'm curious if there are alternative approaches to coding this script that may be more effective. Can anyone offer guidance on this?

As a frontend developer specializing in script injection, I have been utilizing Adobe Target to inject scripts. However, this method presents several challenges: 1. It is difficult to debug code errors as my HTML and CSS are wrapped inside ' ' a ...

javascripthtmlcssfrontend

"Modify the color of a div element by changing it from the color name to the hexadecimal

Is there a way to use color codes instead of typical color names, like #e06666 for red? content.push('<p><div class="color red"></div>Whole Foods Market</p>'); Any suggestions on how to achieve this? ...

javascripthtml

The specified subpath './lib/tokenize' does not match any defined "exports"

As a newcomer to React, I've been facing some challenges while trying to get started. Despite searching on Google and other platforms, I couldn't find a solution to my problem. I was attempting to run code from a YouTube channel called Lama Dev b ...

javascriptnode.jsreactjsnpmnode-modules

Error occurs when attempting to change the color of a dynamically generated div, resulting in the message: "Type Error: Unable to assign a value to the property '

I'm facing an issue with my code where I have a parent div that loads with a random color, and upon clicking a button, it should create a new colored div inside. However, I keep encountering the following error: TypeError: Cannot set property ' ...

javascriptvue.js

When placed within a setInterval loop, the event.clientY variable becomes inaccessible

I am working on a script to move an element around a web page, and I have encountered a problem. Whenever I try to put it in a loop using setInterval while the mouse is down and moving, I receive an error message stating 'Uncaught TypeError: Cannot re ...

javascriptjquery

The color of the link remains blue when using Firefox

Check out my website at kenastonchiropractic.com When viewing the site in Chrome, the "Home" link remains the same color as the other links and they all turn white when hovered over. However, in Firefox, the "Home" link stays blue even after being clicked ...

htmlcssfirefox

Unable to extend the data-toggle dropdown to the entire width of the screen

Is there a way to make my navbar dropdown menu expand to the full width of the screen without leaving white space on the left side? I am using Bootstrap and have included a media query in my CSS as shown below. https://i.sstatic.net/US3ce.png <nav clas ...

htmlcsstwitter-bootstrapbootstrap-5

Having trouble with uploading a file through ajax

I'm currently working on uploading form data through ajax, but I've encountered an issue with uploading images/files. Form Code <form class="form-inline" id="form_add" enctype="multipart/form-data"> <input type="file" id="file-inpu ...

javascriptphpjqueryajaxfile-upload

Issues with NodeJs Express routes execution

After testing, I found that only the default route "/" is working in my code. Many similar issues involve routers being mounted to paths like "/auth" or "/user". Even when I tested the default router mounted to "/", it still isn't functioning properly ...

javascriptnode.jsexpressroutes

Using JQuery to extract the unique identifiers of nodes within a tree view format for the purpose of storing data according to these identifiers

Using Angular to display data in the view, I have a sample code here. When a specific age group category is clicked, I want to populate a form with data and save the entire dataset, including the parent node IDs. I am facing an issue with fetching the pa ...

javascriptjqueryangularjshtmldom

The useEffect hook in my React app causes the homepage to refresh

Currently, I am facing a challenge in retrieving user information from the Redux state to display on the homepage after a user signs in. The issue arises when the component refreshes and all the data stored in Redux gets lost due to the useEffect hook im ...

javascriptreactjsreduxreact-hooks

Is it advisable to store JSON data in data params instead of making an AJAX call?

Previously, I stored my component data within the element's data parameter. Should I continue doing this or switch to using an Ajax call to fetch the data? 1. Using data parameter: <a href="#" data-core="{JSON-data}" id="item-1"> <a href ...

jqueryhtmljsonajax

Oops! The react-social-media-embed encountered a TypeError because it tried to extend a value that is either undefined, not a

I recently attempted to incorporate the "react-social-media-embed" package into my Next.js project using TypeScript. Here's what I did: npm i react-social-media-embed Here is a snippet from my page.tsx: import { InstagramEmbed } from 'react-soc ...

javascriptreactjstypescriptnext.js

Elevate Your Flipclock.js

I am currently working on a website that utilizes flipclock.js, but I am facing some challenges in enlarging it to occupy more space on the page. Is there anyone who knows how to upscale or increase its size? ...

cssflipclock

Harness the power of $compile within the Angular link function while also retrieving and utilizing the arguments of the

I am currently developing a custom directive in angular.js 1.x Here is how I call the directive: <mydirective dirarg={{value-1}}></mydirective> My goal is to define the directive by including code to alter the DOM within the directive's ...

javascriptangularjs

Storing the order of jQuery UI Sortable in the WordPress Admin Panel

My goal is to customize the order of taxonomy terms for each individual post in Wordpress. I have created a metabox on the EDIT POST page that contains custom taxonomy terms and made them sortable using JQuery. Here is my setup on the Wordpress backend: ...

javascriptjqueryajaxwordpressjquery-ui

Understanding the significance of the argument in the context of `express.json({ extended: false})`

Currently, I am in the process of setting up an API using express and encountered this particular line of code: app.use(express.json( { extended: false } )); Although I have referred to the documentation provided by express, I was unable to locate this sp ...

javascriptnode.jsexpress

Is there a way to customize the Master Page in asp.net to resolve the Bootstrap4 dropdown issue? I am encountering an error message that says "Uncaught TypeError: Bootstrap

Hello everyone, I recently encountered an issue while trying to use dropdown in my project after updating to bootstrap 4. It was working perfectly fine before the update, but now I'm getting an error in the JavaScript. The error that pops up when I tr ...

javascriptasp.netwebformsbootstrap-4popper.js

Display real-time information in angular material table segment by segment

I need to incorporate service data into an Angular mat table with specific conditions as outlined below: If the difference between the start date and end date is less than 21 days, display 'dd/mm' between the 'start_date' and 'end ...

javascriptangulartypescriptangular-materialangular-material-table

"Utilize jQuery to target and highlight specific HTML elements when redirecting

I am working with a list of elements and I want to be able to redirect the focus to a specific element using a URL. <div id="20"></div> <div id="21"></div> <div id="22"></div> // example url http://localhost: ...

htmlcss