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 have been dynamically inserting div elements into the DOM using JavaScript, using the appendChild method to add them and later removing them with removeChild. Strangely, when trying to append a div

There seems to be an issue in the code snippet below. The function create() works fine the first time, but encounters a problem on the second run at the line boxWrapper.appendChild(box);. It appears that the removeChild method is causing some disruption in ...

javascriptappendchildremovechild

Display the current page as it appears in AngularJS

I attempted to utilize the ngPrint directive from https://github.com/gilf/ngPrint for printing purposes. However, when I print the page, the design collapses entirely. Is there a solution to maintain the page layout when printing? Please note that Angula ...

javascriptangularjsangular-material

How to Vertically Center a Span in a Mat-Header-Cell with Angular 5 Material

In my angular5 application, I am utilizing a material table to showcase some data. Within a mat-header-cell, I have a combination of a span and an img, and I'm attempting to align them correctly. This is how it currently appears: Below is the snipp ...

htmlcssangularangular5

How do I send multiple values from a child to a parent in Vue.js, while also passing another parameter in the parent's v-on event?

Behold, a demonstration of code. Vue.component('button-counter', { template: '<button v-on:click="emit_event">button</button>', methods: { emit_event: function () { this.$emit('change', 'v1&apos ...

javascriptvue.js

Preserving the button's state when clicked

Here is my code snippet: <blink> const [thisButtomSelected, setThisButtomSelected] = useState(false); var thisButton = []; const onAttributeClick = (e) => { thisButton[e.currentTarget.value] = { thisID: e.currentTarget.id, thisName: e. ...

javascriptreactjsgraphqlapollo-client

Issues encountered when attempting to append the array objects to HTML using $.getjson

Hello, I have a JSON data structure as shown below: [{ "menu": "File", }, { "menu": "File1", }] I have created jQuery code to dynamically add the response to my HTML page like this: $(document).ready(function () { $.getJSON('data.json&a ...

javascriptjson

An alternative to PHP's exec function in Node.js

I am interested in developing a piece of software using C (such as prime number factorization) and hosting it on my web server with Node.js. Following that, I would like to create an HTML document containing a form and a button. Upon clicking the button, ...

javascriptphphtmlnode.jsexpress

Looking to create a custom loader that adapts to different screen sizes

Can anyone help me make the text in my centered div responsive on my website loader? I'm new to coding and struggling to figure it out. Any assistance would be greatly appreciated! Make sure to view the full page snippet so you can see the text prope ...

htmlcssresponsive

Anchor links are functioning properly in browsers, yet they do not seem to work in HTML emails sent through Outlook

I am currently dealing with an HTML email that was generated from a Windows application. The template used for this email is designed in a .aspx page. One issue I have encountered is that the links at the top of the email, meant to take the user to a detai ...

htmloutlook

jsoup - locate element and delete it along with the element preceding it

In my Android app, I am working on extracting data from a stock market historical prices table. However, there are certain rows in the table that need to be removed for clarity. Specifically, I am trying to remove a row in the third tr. I have managed to r ...

androidhtmljsoup

Vue 3 Option api: Issue with v-model input not propagating from child component to parent element

I am currently working on a new project using Nuxt 3, and I have encountered an issue with a contact form where the input values from a child component are not being received by the parent element. Let's dive into the code breakdown: Parent Component ...

javascriptvue.jsvuejs3v-model

What is preventing me from translating an element using transform: translateY()?

I attempted to move the letter 'h' down by 40px on its own, but the translation only seems to work if I relocate the entire word. I also experimented with positioning 'h' absolutely relative to the parent element, but then 'ello&ap ...

htmlcss

The HTML dropdown menu is malfunctioning

I've been struggling to create a website with a dropdown menu. Despite following various guides and searching for solutions, the menu is behaving strangely. I've tried numerous tactics, so some lines of code may be unnecessary. The submenu is ap ...

htmlcss

Troubleshooting Alignment Problem of Maximize and Close Icons in RadWindow Using ASP.Net

Currently, I am utilizing telerik radwindow to showcase a PDF document. The window seems to be functioning correctly, but there is an issue with the alignment of the maximize and close icons. Ideally, they should appear in the same row, however, they are b ...

c#cssasp.nettelerikradwindow

Trouble getting AngularJS $scope arrays to populate with multiple PHP to MySQL queries

In my Angular controller, I used to fetch data from a PHP file that pulled one query from the database, stored it in a scope array, and displayed it on the webpage successfully. However, now I am trying to execute two queries in the same file. Each query ...

javascriptphpangularjsajax

Sharing AngularJs controllers between different modules can help streamline your

I'm facing an issue with trying to access an array from one controller in another controller. Despite simplifying the code for clarity, I still can't seem to make it work. Here is my first controller: app.controller('mycont1', [' ...

javascriptangularjsmodel-view-controller

Leveraging Prototype's Class creation function to declare confidential and safeguarded attributes and functions

Looking for a solid approach to defining private and protected properties and methods in Javascript? Check out this helpful discussion here on the site. Unfortunately, the current version of Prototype (1.6.0) doesn't offer a built-in method through it ...

javascriptoopprivateprototypejsprotected

What is the best way to collapse the entire navigation menu after clicking a link (nav-link) within it?

I created a navigation menu using HTML and SCSS, but I'm facing an issue where the menu does not close when clicking on links inside it. The menu continues to overlay the content on the page instead of closing. Essentially, I want the navigation menu ...

htmlcssonclicknavigation

JavaScript Variables Lose Their Values

Similar Inquiry: How can I get the response from an AJAX call in a function? I have written a function that fetches numerical data from an online file. Although the file retrieval is successful (verified by the alert message), I encounter an issue whe ...

javascriptjqueryajax

Error: Required variable missing in AJAX Post request

When making an ajax call, I use the following code: o.open("POST",q,true); o.setRequestHeader("Content-type","application/x-www-form-urlencoded"); o.setRequestHeader("Content-length",p.length); o.setRequestHeader("Connection","close"); Here, q represent ...

javascriptajax